Question

我正在开发一个能够尽可能大地显示照片和其他内容的网站。我的目标是有一个固定大小的页眉和页脚（假设每个都有40px的高度），我希望<div>元素填充其间的所有空间（即视口的高度100％减去80px）。我只想在所有屏幕上获得最大的内容空间，而不是滚动。

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

这样做的正确方法是什么？这是普通的css甚至可能需要javascript吗？

Answer 1

使用具有已知页眉和页脚高度的盒子模型，可以很好地实现。

您可以通过box-sizing选择框模型渲染。的 DEMO

其他可能性是使用display：table;的 DEMO

如果内容过多，footer会被推下来。

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

基于HTML的演示：

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

Answer 2

使用css height:calc(100%-80px)只能在新浏览器中使用（虽然这是一个相当大的市场份额）

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

JSfiddle

中的示例

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>

如果内容超出窗口高度

，也可以自动滚动内容

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

2 个答案: