全页高度，带有固定的页眉和页脚

Question

我正在开发一个具有固定页眉和页脚的站点。 我试图在没有足够内容的情况下将我的内容显示为整页，而在有内容时仍然可以滚动。

到目前为止，我已经做到了这一点，但是在页面末尾有一些额外的空间。 如何摆脱底部的多余空间？

这是一个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%;}

Answer 1

您可以在包装类上使用它：

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>

Answer 2

除去body {height:100%;}在wrapper上添加一些填充底部以补偿固定的页脚高度。 这是固定的小提琴：

http://jsfiddle.net/0yz9nx35/9/

Answer 3

您可以添加overflow-y: hidden; 请删除底部的滚动条。

Answer 4

如果希望任何滚动条位于.content块上，则可以尝试以下操作。

您可以固定.content ，使顶部和底部边缘分别位于页眉下方和页脚上方。

在这种方法中，您可能不需要.wrapper块元素，除非您需要它来放置一些背景图像。

 html, body { height: 100%; margin: 0px; padding: 0px; } .wrapper { height: 100%; } .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%; } .content { position: fixed; top: 60px; bottom: 50px; left: 0px; background-color: beige; width: 100%; overflow: auto; }

 <div class="wrapper"> <div class="header"></div> <div class="content"> Content goes here<br> and<br>and<br>and<br>and<br>and<br>and<br>and<br>and<br>and<br>and<br> the end. </div> <div class="footer"></div> </div>

全页高度，带有固定的页眉和页脚

问题描述

4 个解决方案

解决方案1
1 2015-03-18 13:12:37

解决方案2
1 已采纳 2015-03-18 13:22:37

解决方案3
0 2015-03-18 13:11:28

解决方案4
0 2015-03-18 13:22:21

全页高度，带有固定的页眉和页脚

问题描述

4 个解决方案

解决方案1 1 2015-03-18 13:12:37

解决方案2 1 已采纳 2015-03-18 13:22:37

解决方案3 0 2015-03-18 13:11:28

解决方案4 0 2015-03-18 13:22:21

解决方案1
1 2015-03-18 13:12:37

解决方案2
1 已采纳 2015-03-18 13:22:37

解决方案3
0 2015-03-18 13:11:28

解决方案4
0 2015-03-18 13:22:21