非扩展容器div

-1

我想设置一个基本的布局，页眉和页脚在整个页面宽度上进行，无论用户设置了什么样的分辨率。非扩展容器div

我已经管理这个，但现在我有一个问题，其中主容器div不会正确展开高度明智地包含内部的div。它似乎只扩展到一定的高度，然后不再进一步，不管你改变什么样的高度或最小高度的风格。

这里的基本结构：

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

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

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

页脚代码是迫使页脚粘到页面的底部，无论主容器的高度（ID =“页”）

我对这些部件的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是红色的，并没有在页面上进行。

来源

2012-05-11 imperium2335

删除#page {height: 100%;}你可以给你想说的一个例子吗？ – sandeep

在直播现场，#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.css将仅在IE6中加载，而不是所有的浏览器，你的问题将得到解决。

来源

2012-05-11 12:48:20 thirtydot

谢谢！非常快速和简单的修复。 – imperium2335

没问题。我不确定你实际上希望页脚行为如何，但是你是否尝试过[粘性页脚]（http://ryanfait.com/sticky-footer/）？ – thirtydot

如果你把高度出你body这会为您解决问题如下

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

来源

2012-05-11 12:46:56 frontendzzzguy

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

来源

2012-05-11 12:51:58 PhilMarc

尽管如此，三十岁的答案还是比较好的 – PhilMarc

非扩展容器div

回答

相关问题