HTML页脚问题答案

【问题标题】：HTML footer problemHTML页脚问题
【发布时间】：2010-09-16 15:45:41
【问题描述】：

无论中间有多少信息，是否可以创建一个位于网站底部的页脚 div？

目前，我拥有的 div 的位置取决于我在正文中有多少内容。

另见：

How do you get the footer to stay at the bottom of a Web page?

【问题讨论】：

【解决方案1】：

我绝不是 css 专家，但这适用于主要浏览器：

.d_footer
{
    position:fixed;
    bottom:0px;
    background-color: #336699;
    width:100%;
    text-align:center;
    padding-top:5px;
    padding-bottom:5px;
    color:#ffffff;
}

【讨论】：

这不会放在窗口底部而不是页面底部吗？
请求是将 div 放在“站点”的底部。显然，这对窗口和页面之间的解释是开放的。合理的解释是：窗口；任何人都可以在页面底部弹出一个 div。
不是任何人。实际上很难在页面底部添加一个 div，无论页面是满还是空，都会坚持下去。
这当然可以，但是当您重新调整窗口大小时，页脚会与内容重叠

【解决方案2】：

浮动内容 div 并让页脚 div 使用 clear: both。

【讨论】：

【解决方案3】：

我知道我将此标记为已回答，但结果我遇到了另一个问题。页脚很好地位于页面底部，但是，如果内容超出页脚，页脚只会浮在内容上方。

如果内容超出底部，是否有办法将页脚保持在页面底部而不重叠？

我的直觉是使用 iframe，但我不知道该怎么做。

【讨论】：

向内容 div 添加底部填充，该填充等于页脚 div 的最大高度。
可能最简单的做法是将与页脚相同的样式应用于容器 div，除了为页脚指定一个固定的“高度”，并使用相同数量的像素作为容器 div 的“底部”位置。但是，短内容文本将成为底部对齐。

【解决方案4】：

JonathanMueller 是对的，效果很好。

我一直在寻找试图这样做的帖子。我能找到的所有东西都固定在窗口的底部。谢谢！

【讨论】：