具有固定页眉和页脚的整页高度

Question

我正在开发一个具有固定页眉和固定页脚的网站。当没有足够的内容时，我试图让我的内容成为整页，并且当有内容时仍然可以滚动。

到目前为止我已经做到了这一点，但我在页面末尾还剩下一些额外的 space。我怎样才能摆脱底部这个额外的 space？

这是一个 jsFiddle：http://jsfiddle.net/0yz9nx35/1/

正如您在 fiddle 中看到的那样，在我的页面底部 space 仍然有一个滚动条显示为空

我的代码：

<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

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

Answer 2

您可以在包装器上使用它 class:

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 3

如果你想让任何滚动条都在.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>

Answer 4

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

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

具有固定页眉和页脚的整页高度

Full page height with fixed header and footer

html

css

height

wrapper