如何防止页脚太高？

Question

我知道我没有很好地说出这个问题。我在页面底部有<div id="footer">。我没有在它上面使用绝对位置，因为我不希望它始终位于底部而是内容的底部（所以你必须向下滚动才能看到它）。

问题是我将使用PHP填充页面主要部分的列表。大部分时间这都会很有效。但是，如果只有一个或两个（或没有）列表条目，则页脚结果太高而且看起来很愚蠢。显然，如果我使用保证金使其正确，那么当列表中有更多条目时，它将具有太大的余量。

我如何做到这一点？

Answer 1

该技术称为粘性页脚。查看一篇非常简单的文章here。这将确保页脚按下内容，如果页面比浏览器短，则页脚仍将粘贴在页面底部。

Answer 2

框模型将根据动态计算的大小定位块级元素。因此，如果您有元素X，Y和Z，则每个元素将落在其他元素之后，具体取决于每个元素的含量。因此，在这种情况下，为了确保在主要内容区域稀疏时您的页面看起来不太奇怪，您需要执行以下操作之一：

• 为内容区域指定一个固定的最小高度（使用css是微不足道的 min-height，但请注意，任何背景样式都会随着内容部分的扩展而扩展）

• 动态计算页脚和内容之间的margin-bottom 基于内容部分的现有高度。 （使用javascript，在domReady上，您获得内容部分的高度，如果它不是最小数量，则适当增加内容部分的margin-bottom，记住设置最大值）

  < / LI>

请注意，通常唯一一次，当你有相对固定的元素，如附近的侧边栏，这使得短内容+页脚区域并排时看起来很奇怪。在移动设备或长滚动网站设计中，只需将页脚放在内容旁边，这样人们就不会完全错过它的存在。