100％的高度不适用于所有div

Question

我正试图让100％的高度工作，但在某些时候文本会流过div。 （网站网址：http://uusilegenda.net/）

这是包装器css：

#wrapper { box-shadow: 0px 0px 20px #666; background-color: #ddd; margin:0 auto; width: 1000px; border-left: 2px solid #666; border-right: 2px solid #666; height:auto !important; height:100%; min-height:100%; position:relative;

这是菜单栏的CSS：

#content2 { float: left; left:0; width: 200px; position: absolute; height: 100%; bottom: 0; background-color: rgba(255,255,255,0.05); border-right: 1px solid #666;

如果我添加

 clear: both; 
 overflow:hidden;

到包装器div并删除

position: absolute;

从内容div看起来几乎是正确的，但菜单栏不是全高。

在你说css很差之前，不要怪我，这是我朋友的布局/ css。 ：）

Answer 1

从position:absolute

中删除#content2

并更改了width

的#content1main

但最终你应该重新考虑你的整个CSS，因为你的情况非常糟糕。

Answer 2

同意关于你的css / layout需要以更好的方式重写的第一个答案，但快速修复就是这样：

将以下css添加到现有的样式规则：

#wrapper { clear: both; overflow:hidden; }

#content1main { width: 760px; }

删除现有样式规则中的以下css ：

#content2 { position: absolute }

这些将解决您的布局问题。