Question

问题如下所示：

单击按钮时问题非常明显 - 无法再看到页面顶部。出现垂直滚动条，但不允许您向上滚动得足够远。我希望（希望）标题转移到页面顶部，但不会再进一步。
即使没有点击按钮也存在问题 - 将窗口调整得足够小，然后再次失去部分页面。

我怀疑问题源于弹性盒的使用方式，但我找不到解决这个问题的方法。可能是调整大小函数导致了问题，但这不能解释上面的第二点（是吗？）。

理想情况下，我希望显示垂直滚动条（在窗口调整大小和/或按钮单击时），以允许用户仍然可以看到页面的全部内容。然后，第一个div（包含标题）将被“推”到页面顶部。

function collapseSection(element) {
  // get the height of the element's inner content, regardless of its actual size
  var sectionHeight = element.scrollHeight;

  // temporarily disable all css transitions
  var elementTransition = element.style.transition;
  element.style.transition = '';

  // on the next frame (as soon as the previous style change has taken effect),
  // explicitly set the element's height to its current pixel height, so we
  // aren't transitioning out of 'auto'
  requestAnimationFrame(function() {
    element.style.height = sectionHeight + 'px';
    element.style.transition = elementTransition;

    // on the next frame (as soon as the previous style change has taken effect),
    // have the element transition to height: 0
    requestAnimationFrame(function() {
      element.style.height = 0 + 'px';
    });
  });

  // mark the section as "currently collapsed"
  element.setAttribute('data-collapsed', 'true');
}

function expandSection(element) {
  // get the height of the element's inner content, regardless of its actual size
  var sectionHeight = element.scrollHeight;

  // have the element transition to the height of its inner content
  element.style.height = sectionHeight + 'px';

  // when the next css transition finishes (which should be the one we just triggered)
  element.addEventListener('transitionend', function(e) {
    // remove this event listener so it only gets triggered once
    element.removeEventListener('transitionend', arguments.callee);

    // remove "height" from the element's inline styles, so it can return to its initial value
    element.style.height = null;
  });

  // mark the section as "currently not collapsed"
  element.setAttribute('data-collapsed', 'false');
}

document.querySelector('#toggle-button').addEventListener('click', function(e) {
  // var section = document.querySelector('.section.collapsible');
  var section = document.getElementById("ohhai");
  var isCollapsed = section.getAttribute('data-collapsed') === 'true';

  if (isCollapsed) {
    expandSection(section);
    section.setAttribute('data-collapsed', 'false');
  } else {
    collapseSection(section);
    section.setAttribute('data-collapsed', 'true');
  }
});

html,
body {
  background-color: #fff;
  color: #636b6f;
  font-weight: 100;
  height: 100vh;
  margin: 0;
}

.slide-open {
  transition: all 1s ease;
}

.full-height {
  height: 100vh;
}

.flex-center {
  align-items: center;
  display: flex;
  justify-content: center;
}

.position-ref {
  position: relative;
}

.content {
  text-align: center;
}

.links>a {
  color: #636b6f;
  padding: 0 25px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1rem;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  display: inline-block;
  margin-bottom: 10px;
}

.email>a {
  color: #636b6f;
  padding: 0 25px;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: .2rem;
  text-decoration: none;
  text-transform: lowercase;
  white-space: nowrap;
}

<link href="//stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid">
  <div class="flex-center position-ref full-height">
    <div class="content">

      <div class="row">
        <div class="col-12">
          <div class="m-b-md" style="font-size: 84px; margin-bottom: 30px;">
            What a Heading!
          </div>
        </div>

        <div class="col-12">
          <div class="links">
            <a>sub-point 1</a>
            <a>sub-point 2</a><br>
            <a>sub-point 3</a>
            <a>sub-point 4</a>
            <a>sub-point 5</a>
          </div>
        </div>

        <div class="col-12">&nbsp;</div>

        <div id="ohhai" class="col-12 slide-open" style="overflow: hidden; display: inline-block; min-height: 0 !important; height: 0; " data-collapsed="true">
          <div class="links">
            <a>some nice blurb about things...</a><br>
            <a>some nice blurb about things...</a><br>
            <a>some nice blurb about things...</a><br>
            <a>some nice blurb about things...</a><br>
            <a>some nice blurb about things...</a><br>
            <a>some nice blurb about things...</a><br>
            <a>some nice blurb about things...</a><br>
            <a>some nice blurb about things...</a><br>
            <a>some nice blurb about things...</a><br>
            <a>some nice blurb about things...</a><br>
            <a>some nice blurb about things...</a><br>
            <a>some nice blurb about things...</a><br>
            <a>some nice blurb about things...</a><br>
            <a>some nice blurb about things...</a><br>
            <a>some nice blurb about things...</a><br>
            <a>some nice blurb about things...</a><br>
            <a>some nice blurb about things...</a><br>
            <a>some nice blurb about things...</a><br>
            <a>some nice blurb about things...</a><br>
            <a>some nice blurb about things...</a><br>
          </div>
        </div>

        <div class="col-12">&nbsp;</div>

        <div class="col-12">
          <div class="email">
            <a>oh@hai.lolz</a>
          </div>
        </div>
      </div>

      <div class="col-12">&nbsp;</div>
      <button id="toggle-button">toggle</button>

    </div>
  </div>
</div>

查看Bootply

Answer 1

删除.full-height完成了这项工作。

似乎不重要

Answer 2

只需删除此行：

.flex-center {
  align-items: center;
  display: flex;
  justify-content: center;
}

<div>元素从页面顶部流出

2 个答案: