css - 根据 child 的高度调整容器高度

Question

我是面临相同问题的无数人之一，他们将 parent 的高度调整为包含的元素。我做了一些研究并发现了类似的问题，但没有答案可以帮助我，所以我想我应该打开一个新的。

我已经尝试了作为答案给出的建议 here , 和 here ，比如添加“clearfix”作为容器 div 的类(在这种情况下，clearfix 类在 Fiddle i created 中)，添加变通方法间隔等。我没有任何 float 元素，我想，所以也许这是一个不同类型的问题。

问题仍然存在，在我的代码中的两个嵌套 div 中( #content_wrapper 不适应 #div_1 和/或 div_2 ，而 #div_2 不会将其高度增加到包含的 <ul> .

我真的希望找到一个解决方案(也许只是我的代码有问题，我无法调试)。

感谢您的关注。

Answer 1

一般来说，您希望避免使用绝对定位进行布局。

您正在寻找的是等高列。等高列的全部意义在于您不需要知道所涉及的任何列的高度，无论它们的内容是什么，它们都将具有相同的高度并优雅地扩展。实现此目的的最简单方法是使用 table* 显示属性。

http://jsfiddle.net/UfWJh/3/

body {
    font-size:10px;
}
/* wrappers */
 #header_wrapper {
    width:95%;
    height:40px;
    margin:auto;
    margin-top:5px;
    padding:2px;
    border:1px solid red;
}
#content_wrapper {
    display: table;
    width:95%;
    margin:auto;
    margin-top:5px;
    padding:2px;
    border:1px solid red;
}
/* div1 */
 #div_1 {
    display: table-cell;
    width:70%;
    border:1px solid purple;
}
/* div 2 */
 #div_2 {
    display: table-cell;
    width:25%;
    border:1px solid purple;
}
#div_2 ul {
    list-style-type:none;
}
#div_2 li {
    width:100px;
    height:30px;
    margin:2px;
    padding:1px;
    border:1px solid darkgrey;
}