当网站"太短"并且页脚下方有空白时该怎么办？

Question

介绍

我见过很多很多很棒的网站都是由最好的前端开发者制作的,但大多数(如果不是全部)网站都有这个问题.什么是最好的跨浏览器技术,将页脚保持在正确的位置？

酷"标题 - 内容 - 页脚"布局:

布局破碎(当网站"太短"时):

在较小的屏幕上一切都很好,但这在1680x1050或FullHD分辨率下非常频繁.

部分修复

• 页脚的绝对定位,但这只会将页脚上方的间隙移动到内容部分,在许多情况下看起来更好,但仍然很糟糕.

• 创建非常长的页脚​​但我们假设在这种情况下我们希望它只有20像素的高度.

• 改变body { background:页脚的颜色会使它看起来不那么粗糙,但差距仍然在那里.

• 可能是一些JavaScript技巧,如获取窗口的高度和改变一些元素的位置/大小,但听起来像一个矫枉过正.

工作修复

看起来仍然是最好的网站足够长,以适应最大的屏幕(嗯,非常明显).

---

这个问题有什么名字吗？我在SO上找不到任何东西,我相信人们之前都在问这个问题.你有任何想法如何处理这个问题,也许有一些智能修复,我不知道的技巧？

谢谢!

Answer 1

我已经看到这称为"粘性页脚",并且发布了几个解决方案.

http://ryanfait.com/sticky-footer/

http://www.cssstickyfooter.com/

Answer 2

将 css 应用到内容部分：

#content{
    min-height:600px;
}