Question

我正在尝试设置一个基本布局，无论用户设置的分辨率如何，页眉和页脚都会在页面宽度上进行。

我已经设法了但是现在我遇到了一个问题，即主容器div不能正确扩展以包含内部的div。它似乎只扩展到一定的高度，然后不再进一步，无论你改变什么高度或最小高度样式。

这是基本结构：

<div id="page">
    <div id="content">
    </div>

</div>
<div id="footClear"></div>

<div id="footer">
</div>

页脚代码是强制页脚粘贴到页面底部，无论主容器的高度如何（id =“page”）

我对这些部分的CSS是：

#page {
margin:0 auto;
width:1000px;
background:red;
padding:0px;
min-height:100%;
position:relative;
margin-bottom:-47px;
}

#content {

}

#footer {
width:100%;
height:22px;
position:relative;
margin:0 auto;
background:#000000;
text-align:center;
padding-top:3px;
font-size:12px;
}

#footClear {
    height:22px;
    clear:both;
}

如果您想看一下我的网站内容的链接：www.therapyoracle.co.uk/new

您可以看到页面div为红色，并且不会在页面上继续显示。

Answer 1

如果你从body取出身高，这将为你解决，如下所示

body {
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 14px;
    padding: 0;
    margin: 0;
    }

Answer 2

在您的实际网站上，#page设置了height: 100%，这导致了问题。

它来自你的ie6.css！这就是你试图仅在IE6中加载它的方式：

<!—[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="assets/css/ie6.css" />
<![endif]—>

上面HTML中的连字符是错误的。用以下内容替换HTML：

<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="assets/css/ie6.css" />
<![endif]-->

然后只会在IE6中加载ie6.css，而不是所有浏览器，并且您的问题将得到解决。

Answer 3

删除margin-bottom:-47px;并删除ie6.css

中的#page {height: 100%;}

非扩展容器div

3 个答案: