Question

我正在开发一个（html）项目，我需要遇到这种情况：

我需要在视图区域的底部。然后我需要一个div，它将填充剩余的视图高度。

<body style="overflow:hidden; width:100vw; height:100vh;">
    <div id="top" style="overflow-y:scroll;">
        Lorem Ipsum
    </div>
    <div id="bottom"><!--Needs to always be on the bottom of body-->
        Lorem Ipsum
    </div>
</body>

#top和#bottom的高度不能是百分比，因为#bottom的高度会因内容的变化而有所不同。

Answer 1

您可以使用Flexbox并将overflow-y: scroll设置为滚动区域

body, html {
  margin: 0;
  padding: 0;
}
.content {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.main {
  flex: 1;
  overflow-y: scroll;
  background: lightgreen;
}
footer {
  flex: 0 0 50%;
  background: lightblue;
}

<div class="content">
  <div class="main">Main<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div>
  <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque modi harum quidem impedit .</div>
  <footer>Footer</footer>
</div>

Div高度占据剩余视图高度

1 个答案: