Javascript Div高度占剩余视图高度_Javascript_Html_Css

Javascript Div高度占剩余视图高度

javascript html css

Javascript Div高度占剩余视图高度,javascript,html,css,Javascript,Html,Css,我正在从事一个（html）项目，我需要这种情况： I div需要位于视图区域的底部。然后我需要一个div，它将填充剩余的视图高度 <body style="overflow:hidden; width:100vw; height:100vh;"> <div id="top" style="overflow-y:scroll;"> Lorem Ipsum </div> <div id="bottom"><

我正在从事一个（html）项目，我需要这种情况：

I 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

的高度会随着内容的变化而变化。

您可以使用

Flexbox

并为滚动区域设置

overflow-y:scroll

body，html{
保证金：0；
填充：0；
}
.内容{
高度：100vh；
显示器：flex；
弯曲方向：立柱；
}
梅因先生{
弹性：1；
溢出y：滚动；
背景：浅绿色；
}
页脚{
弹性：0.50%；
背景：浅蓝色；
}


主要







































Lorem ipsum dolor sit amet，奉献精英。伊塔克·莫迪·哈鲁姆·奎登（Itaque modi harum quidem）阻止了它。
页脚

您的意思是，如果需要一些空间来填充视图，必须将其添加到第一个区域吗？是的，顶部区域需要填充可用空间