Sticky Footer由于某种原因无法正常工作

Question

我试图让粘性页脚在下面的网站上运行，但出于某种原因出现了veritcal滚动条：

http://berrisford.gumpshen.com/

有人可以帮忙吗？

Answer 1

这是因为border-top。 将其添加到body CSS应该可以在大多数现代浏览器中修复它：

body{
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
}

Answer 2

您的垂直滚动条是由此造成的......

body {
    border-top: 5px solid #293649;
}

和...

html, body, #container  {
    height: 100%;
}

根据W3C Box Model，body上的5像素边框已添加到已height的{​​{1}}在body。这有效地使您的100%元素的高度body始终加上5个像素，因此滚动条。

要解决此问题，请尝试将边框移动到其他元素。如果您的问题可以简化为只需要重现的最少代码量，我就能发布更精确的解决方案。就目前而言，只有我愿意深入挖掘的代码。

Answer 3

如果你试图让页脚粘住，你只需要以下

#footer {
   position: fixed
   left: 0;
   bottom: 0;
   width: 100%;
   z-index: 100; /** some of the content has a z-index higher than 0 so I chose 100 randomly **/
}