Question

我的CSS布局有问题。我试图通过IE管理问题，一切正常，除了页脚容器消失了！我试图重新编写CSS代码，但问题仍然存在。我一直在努力修复它，没有任何效果。

我不知道我错过了什么！

以下是我做的JSFiddle

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

Answer 1

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

隐藏页脚

Answer 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的高度。

<强>文档

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

Answer 3

将页脚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

CSS布局页脚DIV以100％高度消失

3 个答案: