大屏幕上的网站页脚 - 填补空间

Question

在大屏幕上，我的页脚不会位于页面底部，底部会留下一个白色的“条形”（页面背景的颜色）。

我知道粘性页脚等，但由于在页脚中使用元素的绝对定位，这些技术会使页脚的其余部分出错。我现在直接在页脚下方添加了一个空div，并将其最小高度设置为100％，背景颜色与页脚的颜色相匹配（黑色）但是它没有做任何事情 - 只有像素的设置高度除了我希望它是动态的，所以如果它是10px的空间或500px的空间，它填补空间。

有没有人有工作？

Answer 1

如果您不想粘贴页脚，请使body背景颜色与页脚颜色相同，然后将内容区域的背景设置为白色。无论浏览器的大小如何，这都会使页脚的外观延伸到页面底部。

Answer 2

是的，你没有使用'绝对'的页脚定位方式，这是一个糟糕的解决方案。

奇怪的是，Twitter Bootstrap有一个如何实现粘性页脚的最简单的例子 - 这是一种已经存在多年的技术：

http://getbootstrap.com/examples/sticky-footer/

方法很简单。除了页脚之外，在所有代码周围放置一个包装器div。 如果您引用该链接的源代码，您将看到一个id为wrap的包装器。 如果你然后检查上面的css： http://getbootstrap.com/examples/sticky-footer/sticky-footer.css

只需复制粘性页脚样式部分即可适应您的网站。关键部分是页脚高度值与包装元素的边距和填充值匹配。