css - CSS 布局页脚 DIV 以 100% 的高度消失

Question

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

我不知道我错过了什么！

这是我所做的JSFiddle

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

Answer 1

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

它隐藏了页脚

Answer 2

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

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

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

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

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

文档

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

Answer 3

将 Footer DIV 放入 MID div 并使用以下内容修改您的 CSS：JSFIDDLE 链接在这里

#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 链接在这里