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;
}

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

http://jsfiddle.net/2y97A/

Answer 1

由于#content位于绝对位置，因此当#leftcol高度增加时，您无法使#leftcol的高度增加。如果您希望make position:absolute;增加其高度，则必须删除#content。

CSS解决方案

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

#leftcol { 
 width: 500px;
}

请参阅此DEMO

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 in action LIVE DEMO

Answer 2

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

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

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

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

2 个答案: