html - 如果内部绝对div的高度增加，自动增加相对div的高度？

Question

我有以下html，

<div id="content">

<div id="leftcol">
<p>Lorem Ipsum</p>
</div>

</div>

使用以下CSS，

#content {
width: 780px;
padding: 10px;
position: relative;
background: #8b847d;
}

#leftcol { 
width: 500px;
position: absolute;
}

现在我需要做的是，当leftcol的高度增加时，内容的高度应该自动增加。这是小提琴，

http://jsfiddle.net/2y97A/

Answer 1

#content当高度增加时，您不能增加#leftcol高度，因为它#leftcol是绝对定位的。position:absolute;如果你想#content增加它的高度，你必须删除。

CSS 解决方案

#content {
 width: 780px;
 padding: 10px;
 position: relative;
 background: #8b847d;
}

#leftcol { 
 width: 500px;
}

看这个演示

jQuery 解决方案

如果您仍想保持#leftcol绝对位置。您将需要使用 jQuery。

您可以使用下面的 jQuery 代码

$(document).ready(function() {
    $("#content").each(function() {
        var newHeight = 0;
        $.each( $(this).children(), function() {
            newHeight = newHeight + $(this).height();
        });
        $(this).height( newHeight );
    });
});

jQuery 在行动LIVE DEMO

Answer 2

保持绝对定位的原因是什么？最简单的方法显然是删除它，但如果您可以仅在其中一个上删除它（#leftcol），则可以这样做：

#content {
width: 780px;
padding: 10px;
position: relative;
overflow: hidden;
background: #8b847d;
}

#leftcol { 
width: 500px;
float: left;
}