调整html元素的高度以填充固定页眉和页脚之间的剩余空间的正确方法是什么?

What's the proper way to adjust the height of an html element to fill the remaining space between fixed header and footer?

本文关键字：空间 余空间 是什么 方法 高度 元素 html 填充 调整 之间      更新时间：2023-09-26

我在一个网站上工作，应该能够显示照片和其他内容尽可能大。我的目标是有一个固定大小的页眉和页脚(让我们说每个40px的高度)，我想要一个<div>元素来填充之间的所有空间(即高度100%的视口减去80px)。我只是想在所有屏幕上最大的内容空间，没有滚动。

 +---------------------+
 | Header (40px)       |
 +---------------------+
 |                     |
 | Dynamic (100%-80px) |
 |                     |
 |                     |
 +---------------------+
 | Footer (40px)       |
 +---------------------+

正确的方法是什么?这甚至可能与纯css或javascript是必需的吗?

使用已知页眉和页脚高度的框模型可以很容易地实现。

您可以选择通过box-sizing渲染盒模型。

其他可能是使用display:table;

在这里，footer将被下推，如果太多的内容坐在中间。

其他可能性是display:flex或类似于fausses-column的技术，其中您使用body background并为中间容器设置没有边界和背景。页脚保持在绝对位置或固定位置

基于HTML的

演示:

<header>header</header>
<main>main</main>
<footer>footer</footer>

使用css height:calc(100%-80px)只能在新浏览器中工作(尽管这是相当大的市场份额)

有一些更简单的解决方案，比如固定页眉和页脚，并根据页眉和页脚的高度填充内容，以防止内容隐藏在页眉和页脚后面。

示例CSS: 

body{
 background-color:grey;  
 padding: 50px 0;     
 margin: 0px;
}
header {
 position:fixed;
 height:40px;
 width:100%;
 top:0px;
 background-color:red;
}
footer {
 position:fixed;
 height:40px;
 width:100%;
 bottom:0px;
 background-color:red;
 }
HTML: 

<header>
    Header
</header>
<div>
    Contents: Bla Bla Bla
</div>
<footer>
    Footer
</footer>

这也允许自动滚动内容，如果它延伸超过窗口的高度

相关文章：