Question

我正在尝试在某些元素的剩余空间中设置垂直可滚动div。他们都没有一个固定的高度。

我所得到的只是一个flexbox元素，它可以根据其内容进行调整，但是我真正需要的是该元素填满了空白空间，并且它的内容只是滚动到那里。

HTML

<div class="wrapper-1">
  <div>some stuff</div>
  <div>some other stuff</div>
</div>
<div class="wrapper-2">
  <div>more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more stuff</div>
</div>
<div class="wrapper-3">
  <div id="header">
      <div>My</div>
      <div>Header than can grow</div>
  </div>
  <div id="content">
      <div>My Content that will fill remaining space untill page has to scroll</div>
      <div>My Content that will fill remaining space untill page has to scroll</div>
      <div>My Content that will fill remaining space untill page has to scroll</div>
      <div>My Content that will fill remaining space untill page has to scroll</div>
      <div>My Content that will fill remaining space untill page has to scroll</div>
      <div>My Content that will fill remaining space untill page has to scroll</div>
      <div>My Content that will fill remaining space untill page has to scroll</div>
      <div>My Content that will fill remaining space untill page has to scroll</div>
      <div>My Content that will fill remaining space untill page has to scroll</div>
      <div>My Content that will fill remaining space untill page has to scroll</div>
      <div>My Content that will fill remaining space untill page has to scroll</div>
  </div>
</div>

CSS

html, body {
    margin: 0;
    height: 100%;
}

.wrapper-1 {
  background: white;
}

.wrapper-2 {
  background: lime;
}

.wrapper-3 {
  display: flex;
  flex-direction: column;
}

#header {
  background: #edc;
  flex: 1 1 40px;
}

#content {
    flex: 1 1 auto;
    background: yellow;
    overflow: auto;
}

#content div {
  min-height: 50px;
}

#content的高度应从#header到页面底部。

理想的解决方案是仅使用CSS，但是另一种JS解决方案可能会有所帮助，事实是，即使在调整浏览器窗口大小时，这种方法也必须起作用。

Answer 1

实际上，flex会自然地填充空白区域。您要设置父容器的高度，为此，您有2种解决方案：

将height: 100%设置为html，body和所有中间容器，直到到达.wrapper
或者使用更简洁的方法：直接将min-height中的.wrapper设置为100vh（表示视口高度的100％）。下面的例子

.wrapper {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

#content {
  flex: 1;
}

.wrapper > div {
  border: 1px solid tomato;
}

<div class="wrapper">
  <div>
    <div>some stuff</div>
    <div>some other stuff</div>
  </div>
  <div>
    <div>My</div>
    <div>Header than can grow</div>
  </div>
  <div id="content">
    <div>My Content that will fill remaining space untill page has to scroll</div>
    <div>My Content that will fill remaining space untill page has to scroll</div>
    <div>My Content that will fill remaining space untill page has to scroll</div>
    <div>My Content that will fill remaining space untill page has to scroll</div>
    <div>My Content that will fill remaining space untill page has to scroll</div>
    <div>My Content that will fill remaining space untill page has to scroll</div>
    <div>My Content that will fill remaining space untill page has to scroll</div>
    <div>My Content that will fill remaining space untill page has to scroll</div>
    <div>My Content that will fill remaining space untill page has to scroll</div>
    <div>My Content that will fill remaining space untill page has to scroll</div>
    <div>My Content that will fill remaining space untill page has to scroll</div>
    <div>My Content that will fill remaining space untill page has to scroll</div>
    <div>My Content that will fill remaining space untill page has to scroll</div>
    <div>My Content that will fill remaining space untill page has to scroll</div>
    <div>My Content that will fill remaining space untill page has to scroll</div>
    <div>My Content that will fill remaining space untill page has to scroll</div>
    <div>My Content that will fill remaining space untill page has to scroll</div>
    <div>My Content that will fill remaining space untill page has to scroll</div>
  </div>
</div>

如何使flexbox元素填充剩余空间并滚动？

1 个答案: