假设以下 html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="header">
<!-- dynamic height -->
</div>
<div id="main" style="overflow: scroll;">
<!--
contains actual content
height should be whatever is left over
-->
</div>
<div id="footer">
<!-- dynamic height -->
</div>
</body>
</html>
基本上我想要的是:
main height = body height - (header height + footer height)
body 和 html 高度为 100%。
作为header的高度和 footer是动态的(会经常变化)，我需要一种动态的方式来设置 main 的高度，即，我无法以像素或百分比指定任何高度。
确实还有其他类似的问题，但我不是在寻找“ float /粘性页脚”，main div 必须有剩余的高度。
最佳答案
您必须指定页脚和页眉的高度。
您可以在准备好的文档上使用 javascript 来设置页脚、页眉和主 div 的高度。
然后，像这样使用 css:
#header{
position: absolute;
top: px;
height: /*dynamically set by javascript*/;
left: px;
right: px;
}
#footer {
position: absolute;
bottom: 0px;
height: /*dynamically set by javascript*/;
left: 0px;
right: 0px;
}
#main {
position: absolute;
bottom: /* set by javascript with height of footer */;
top: /* set by javascript with height of header */;
left: 0px;
right: 0px;
}
关于html - 如何填充两个动态 div 之间的垂直空间？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14625891/