Question

我正在将页脚部分添加到一个简单的网页，因为如果我将页脚高度保持在150px，则页面上只有少数项目在页脚底部显示空白区域。当我保持height:100%占据页面底部的剩余空间时，相反，它会向显示垂直滚动条的页脚部分增加3-4倍。

他们的方式我只能在页脚部分添加那么多高度，以便不添加滚动条。甚至使用jQuery。

在上面提到的小提琴示例中，您将注意到通常的页脚高度。对我来说，似乎默认情况下总是占用页脚部分上方定义的HTML元素的高度。

.fullWidth {
   width: 100%;
   margin-left: auto;
   margin-right: auto;
   max-width: initial;
    background-color:red;
    height:100%;
}
.footer
{
    margin-top:50px;
    text-align:center;
}

Answer 1

这里的问题是，height:100%给.fullWidth使其成为 viewport 高度的100％......这意味着，如果上面有任何内容推送它向下，.fullWidth将延伸到视口底部以下，创建一个滚动条。如果您只是在视觉上看到页脚看起来填充了剩余的空间（在视口的内容和底部之间），这就是我用过一次伪造它的方法。

只需使整个body与页脚的背景颜色相同，然后将其余内容放在具有主背景颜色的包装中。例如，您的HTML可能会变为：

<div class="main">
    (Content from before goes in here.)
</div>
<div class="row">
    <div class="large-12 columns footer">footer</div>
</div>

一些改动/添加的CSS（应该注意这种方法完全没有使用.fullWidth，因此您可以从HTML / CSS中删除它）：

body{
    background-color:red; /* Footer background colour */
}
.main{
    background-color:#FFF; /* Main background colour */
}
.footer {
    background-color:red;
    margin-top:50px;
    text-align:center;
}

这是一个JSFiddle，展示了它的外观。现在，如果页脚下方有额外的空间，除非您开始检查元素，否则无法察觉。如果这不是您想要的，您可能需要查看其他人建议的粘性页脚。

希望这有帮助！如果您有任何问题，请告诉我。

Answer 2

试试这个：

 .fullWidth {
   width: 100%;
   margin:0 auto;
   max-width: initial;
   background-color:red;
   height:100%;
 }

您还需要为页脚设置高度：

 .footer
  {
    margin-top:50px;
    text-align:center;
    height: 50px;
  }

页脚部分添加超过通常的高度

2 个答案: