Div高度占用剩余视图高度

问题描述：

我正在处理（html）项目，我需要这种情况：Div高度占用剩余视图高度

我需要在视图区域底部的div。然后我需要一个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高度将因改变的内容而变化。

您的意思是设置overflow-y: scroll，如果你需要一些空间来填充视图，必须将其添加到第一个区域？ –

是的，顶部区域需要填充可用空间 –

答

您可以使用Flexbox和滚动区

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高度占用剩余视图高度

相关推荐