0

我正在尝试将包装 div 的大小设置为至少页面的高度,然后根据内容进行调整(如果重叠)。

我现在拥有的是min-height:100%;,但是当内容超过页面高度时,它不会超过页面高度。

解决此问题的最佳方法是什么?

编辑:这是我的相关 CSS。

#wrapper{width:1000px;min-height:100%;margin:0px auto;background:#F2F2F2;}

header{width:1000px;height:50px;margin:0px auto;}

h1#logo{float:left;margin:5px 5px 0px;padding:0px;font:bold 30px 'Russo One', sans-serif;line-height:32px;}
h1#logo a, h1#logo a:visited{text-decoration:none;color:#005883;}
h1#logo a:hover, h1#logo a:visited:hover{color:#BAE5E9;}
img#logo-badge{vertical-align:middle;margin:-3px -5px 0px -10px;}


nav{float:right;font:20px 'Lato', sans-serif;}
nav ul{float:right;margin:0px;padding:0px;list-style:none;}
nav li{float:left;}
nav li:hover{}
nav a, nav a:visited{height:100%;padding:0px 20px 0px;display:block;text-decoration:none;color:#FFFFFF;}
nav a:hover, nav a:visited:hover{background:;color:#BAE5E9;}

#content{min-height:100%;float:left;margin:0px auto;}

#main-content{width:700px;min-height:100%;float:left;padding:0px 15px;}
#main-content h1{color:#515151;margin:0px;padding:0px;border:1px solid #515151;border-top:0px;border-right:0px;border-left:0px;}

#demo-src{border-top:1px solid #D7C7B2;border-bottom:1px solid #D7C7B2;text-align:right;}
#sidebar{width:270px;min-height:100%;float:left;}

#footer{width:100%;float:left;}
4

3 回答 3

2

有你的问题。 #content向左浮动,这允许它在容器 div 的边界之外流动。查看这个 Stack Overflow 问题,了解如何解决该问题的详细信息。

该问题的建议答案是使用 jQuery EqualHeights插件,或使用Equal Height Columns作为 CSS 解决方案。

于 2012-04-09T19:03:38.390 回答
0

尝试在其上设置最大高度,如果这不起作用,请尝试仅使用高度和宽度

于 2012-04-09T18:50:25.530 回答
0

如果其他人遇到同样的问题,我发现这个简单的 clearfix http://nicolasgallagher.com/micro-clearfix-hack/

于 2012-04-09T20:01:17.353 回答