有固定页眉和页脚的全页高
有固定页眉和页脚的全页高
提问于 2015-03-18 12:55:36
我正在开发一个网站，我有一个固定的页眉和一个固定的页脚。当没有足够的内容时，我试图让我的内容成为完整的页面，当有内容的时候，我仍然可以滚动。
到目前为止，我所做的是这样做的，但是在我的页面末尾，我还有一些额外的空间。我怎么才能摆脱底部这个多余的空间呢？
下面是一个jsFiddle：http://jsfiddle.net/0yz9nx35/1/
正如您在小提琴中看到的，仍然有一个滚动条显示我页面底部的空空间。
我的代码：
<div class="wrapper">
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</div>CSS：
html { height: 100%; margin: 0px; padding: 0px; }
body { height: 100%; margin: 0px; padding: 0px;}
.wrapper { min-height: 100%; height: 100%; padding-top: 60px; }
.header { position: fixed; top:0px; left:0px; height:60px; background-color: #333; width: 100%;}
.footer { position: fixed; bottom:0px; left:0px; height:50px; background-color: #333; width: 100%;}回答 4
Stack Overflow用户
回答已采纳
发布于 2015-03-18 13:22:37
删除body {height:100%;}，在wrapper上添加一些填充底部，以补偿固定的页脚高度。这是固定的小提琴：
http://jsfiddle.net/0yz9nx35/9/
Stack Overflow用户
发布于 2015-03-18 13:12:37
您可以在包装器类中使用它：
height: calc(100% - 60px)或者，您可以通过以下方式更改页面的结构：
<!DOCTYPE html>
<html>
<head>
<style>
* { margin: 0; padding: 0; }
#global { height: 100vh; }
#header { height: 60px; background-color: orange; }
#content { height: calc(100% - (60px + 50px)); background-color: gray; }
#footer { height: 50px; background-color: green; }
</style>
</head>
<body>
<div id="global">
<div id="header">
Aenean
</div>
<div id="content">
lacinia
</div>
<div id="footer">
quam
</div>
</div>
</body>
</html>Stack Overflow用户
发布于 2015-03-18 13:11:28
您可以添加overflow-y: hidden;，请删除底部的滚动条。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29122672
复制相关文章
相似问题
腾讯云开发者
