Javascript 页脚部分添加了比通常更高的高度

我将页脚部分添加到一个简单的网页中，因为页面上只有很少的项目。如果我将页脚高度保持在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;
}

试试这个：

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

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

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

---

这里的问题是，将

高度：100%

指定给

。fullWidth

将使其成为视口高度的100%…这意味着，如果上面有任何内容将其向下推，

。fullWidth

将延伸到视口底部以下，从而创建一个滚动条。如果您只希望在视觉上显示页脚以填充剩余空间（在内容和视口底部之间），那么我曾经使用过一种方法来模拟它

只需使整个

正文

与页脚的背景颜色相同，并将其余内容与主背景颜色一起放在包装中即可。例如，您的HTML可能会变成：

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

这是一个演示它的外观。现在，如果在页脚下面有额外的空间，除非您开始检查元素，否则将无法看到它。如果这不是您想要的，您可能需要查看粘性页脚，正如其他人所建议的那样

---

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

我看不出有什么区别。。。但同时，我不确定问题是什么我明白。。但是结果也没什么不同，你有没有检查过粘脚？？我觉得你看起来像那个。我不明白问题是什么，而且，我也不认为你提供的小提琴中页面的位置有任何问题！谢谢，我认为这是唯一的替代方法，除非使用jquery。

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