使用动态内容保持页脚向下答案

【问题标题】：Keep footer down with dynamic content使用动态内容保持页脚向下
【发布时间】：2012-04-11 21:07:50
【问题描述】：

我在一个名为 txtresults 的 div 中有动态内容，如下所示：

<div id="txtresults"></div>

这个div在输入值查询后由html填充，请看示例：JsFiddle

如果您输入内容，您将看到 div 被搜索结果填充。我的问题是，无论结果多长或多短，我都想将页脚（#footer）定位在结果下方。正如您现在看到的，页脚位于#txtresults 之外。如果我将页脚放在 div 内，我无法看到 div..我该如何解决这个问题？

【问题讨论】：

【解决方案1】：

如果没有结果，您希望将页脚放在哪里？根据您的问题，我解释说您想要一个粘性页脚。

否则，如果您希望将页脚放在结果下方，请从footer 中删除position: absolute（和bottom: 0）。

【讨论】：

【解决方案2】：

只需从 css 中删除绝对位置，页脚就会根据内容向下推。

【讨论】：

【解决方案3】：

如果我对您的问题的理解正确，您可以从#footer 中删除以下内容：

position: absolute;
bottom: 0px;

您可能还想在页脚 CSS 中添加 margin-top: 20px。

【讨论】：