我在一个网站上工作,应该能够显示照片和其他内容尽可能大。我的目标是有一个固定大小的页眉和页脚(让我们说每个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>
这也允许自动滚动内容,如果它延伸超过窗口的高度