我有一个带有页眉，页脚和中心内容部分的CSS端。
我想使用浏览器窗口的全部高度。
例如
header - height: 20vh
content - height: 60vh
footer - height: 20vh
那是100vh，整个窗口。
是否有可能通过CSS动态地实现这种分手，而无需使用与应用程序状态有关的javascript手动操作样式（页脚处于打开还是关闭状态）？
可以说，如果禁用页脚，则内容应具有80vh，如果启用则应具有60vh。
您可以使用Flexbox进行设置，在其中使用设置#content剩余的垂直空间flex: 1：
function display() {
document.getElementById('footer').classList.toggle('display');
}html, body {width:100%;height:100vh;margin:0}
body { /* or any other parent element / flex-container */
display: flex; /* displays children inline by default thats why you need to change its direction from row (default) to column */
flex-direction: column; /* stacks children vertically */
}
header, footer {
height: 20vh;
}
#content {
flex: 1; /* takes the remaining vertical space no matter if the footer is present or not or even if its the only child element inside the flex-container */
background: Aquamarine;
}
.display {display:none}<header>HEADER</header>
<div id="content">CONTENT <a href="#" onclick="display()">Toggle height</a></div>
<footer id="footer">FOOTER</footer>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句