Div高度的CSS麻烦

我想设置我的环绕div的大小至少是页面的高度，然后根据内容进行调整，如果它重叠。Div高度的CSS麻烦

我现在所拥有的是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;}

来源

2012-04-09 justanotherhobbyist

你试图让横跨屏幕的高度一个div，或者是你尝试与另一格匹配起来？如果你能够确切地说明你想要做什么，我想我们可以帮助你更好。 – saluce 2012-04-09 18:51:57

我认为*你必须使用'html，body {height：100％;}'才能工作。 – bfavaretto 2012-04-09 18:51:57

我已经有HTML和正文100％，这是奇怪的事情，@saluce，我想要外部div包装所有内容，现在内部divs中的文本溢出它，我希望它与他们一起成长。 – justanotherhobbyist 2012-04-09 18:54:39

有您的问题。 #content是向左浮动的，它允许它流到容器div的边界之外。查看this Stack Overflow question了解如何解决该问题的详细信息。

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

来源

2012-04-09 19:03:38 saluce

是的，你是对的。 Thx将会看看那里的答案。 – justanotherhobbyist 2012-04-09 19:08:04

答案应该是自成一体的。读者不应该参考其他SO答案才能看到解决方案。请通过在您自己的答案中发布完整的相关解决方案来修复它。 – Sparky 2012-04-09 19:32:39

我在谷歌上发现了一些更容易的东西，http：// nicolasgallagher.com/micro-clearfix-hack/解决了它的问题。直到现在，从来没有理解使用clearfix。 – justanotherhobbyist 2012-04-09 20:02:42

尝试在它设置一个最大高度，如果不工作尝试使用只是高度和宽度

来源

2012-04-09 18:50:25

问题是高度差异太大。你的意思是设置像max-height：5000px？ – justanotherhobbyist 2012-04-09 18:52:19

如果高度变化到那个程度，那么是 – 2012-04-09 18:53:23

尝试过，没有任何改变。 – justanotherhobbyist 2012-04-09 18:55:15

如果别人运行到同样的问题，我发现这个简单的clearfix http://nicolasgallagher.com/micro-clearfix-hack/

来源

2012-04-09 20:01:17 justanotherhobbyist

Div高度的CSS麻烦

回答

相关问题