CSS 布局页脚 DIV 以 100% 的高度消失答案

【问题标题】：CSS layout footer DIV disappear with 100% heightCSS 布局页脚 DIV 以 100% 的高度消失
【发布时间】：2013-02-16 07:41:21
【问题描述】：

我的 CSS 布局有问题。我试图通过 IE 解决问题，一切正常，除了页脚容器消失了！我试图重新编码 CSS，但问题仍然存在。我已经尝试了几天来修复它，但没有任何效果。

我不知道我错过了什么！

这是我所做的@987654321@

谁能告诉我我错过了什么？

【问题讨论】：

什么浏览器和版本会失败
嗨 iSR5，欢迎来到 Stack Overflow。 html 和 css 在哪里？我邀请您阅读stackoverflow.com/faq。

标签： css layout height

【解决方案1】：

将 Footer DIV 放入 MID div 并修改您的 CSS 如下：JSFIDDLE link here

#mid{
    background: #666666;
    width: 563px;
    text-align: center;
    height: 100%;
    position: relative;
}
#foot{
 width: 800px;
 height: 150px;
 background: #FFD700;
 position: absolute; bottom: 0; left: 0;
}

JSFIDDLE link here

【讨论】：

【解决方案2】：

当您将主体设置为隐藏overflow，然后将#container 元素设置为100% 高度时，它会将页脚容器推离屏幕底部。如果您删除了 overflow 声明（因此允许滚动），您会在“折叠”正下方看到页脚。

我不确定您的目标是什么，但如果您需要一个非滚动页面（通常是糟糕的可用性实践，仅供参考），您可以使用 position 将您的页脚粘贴到屏幕底部：

/* Footer */
#foot{
 width: 800px;
 height: 150px;
 background: #FFD700;
 position:absolute;
 bottom:0px;
}

查看结果：http://jsfiddle.net/euT3x/

否则，删除overflow声明，或在页面加载后使用javascript计算#container的高度。

文档

CSS position MDN 上的属性 - https://developer.mozilla.org/en-US/docs/CSS/position
CSS height MDN 上的属性 - https://developer.mozilla.org/en-US/docs/CSS/height

【讨论】：

【解决方案3】：

the problem is on this part of the css code: 
overflow: hidden;

它隐藏了页脚

【讨论】：