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块元素，除非您需要它来放置一些背景图像，例如。

＆＃13;

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;
 }

＆＃13;

<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>

＆＃13;

整页高度，固定页眉和页脚

4 个答案: