html - 网站 "too short"页脚下方有空白怎么办？

Question

简介

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

很酷的“页眉-内容-页脚”布局:

布局损坏(当网站“太短”时发生):

在较小的屏幕上通常一切都很好，但在 1680x1050 或全高清分辨率下这很常见。

部分修复

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

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

• 将 body { background: 更改为页脚的颜色会使它看起来不那么难看，但差距仍然存在。

• 可能是一些 JavaScript 技巧，例如获取窗口的高度和更改某些元素的位置/大小，但听起来有点矫枉过正。

工作修复

看起来最好还是让网站足够长以适应最大的屏幕(好吧，很明显)。

---

这个问题有名字吗？我在 SO 上找不到任何东西，我敢肯定以前有人问过这个问题。您对如何处理此问题有任何想法吗？也许有一些我不知道的智能修复和技巧？

谢谢!

Answer 1

将 css 应用到内容部分:

#content{
    min-height:600px;
}