html - 使用位于底部的页脚允许页面随内容增长

Question

我使用本教程 (http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page) 设计了一个带有浮在屏幕底部的页脚的网站无论内容的长度如何 - 但是我现在遇到的问题是视口(viewport)中显示的内容会更多，而不是更少。

我的设计比他演示的更复杂，而且我将其与 CMS 一起使用，因此它在 html 方面显然有点不同。

在使用此模型时，有没有人有任何下推内容的技巧 - 我正在处理的网站是 http://sproffer.joyatechsolutions.com

如果您转到定价页面 - 您会看到内容多于显示内容(5 段)，尽管滚动条显示 - 它只是在本应固定在底部的页脚下方添加空间。

有什么建议吗？谢谢!

Answer 1

你应该使用

position:fixed;

对于#bottom

你还应该在

的 #mainContent 上添加一个 padding-bottom

padding-bottom: 255px;

这是为了阻止#mainContent 的内容被#bottom div 隐藏

事实上，我会将您的 div#mainContent 更改为

div#mainContent {
    width: 1000px;
    overflow:hidden;
    background: white;
    margin-top: 3px;
    padding: 14px;
    padding-bottom: 225px;
}