Question

我正在将元素添加到最初高度为“auto”的容器div中。我希望它的高度会随着子元素的追加而更新。但实际上并非如此。有人能帮助我吗？我只想根据孩子的身高更新容器div高度。

我使用了chrome debuging工具，容器div的高度小于div div的高度。 儿童div是浮动的：左。

Answer 1

如果您要将浮动的子项添加到div中，则需要在父项上添加overflow:auto;。

您还可以使用其他元素来清除浮动clear:both将执行此操作。

这是因为浮动的元素被从文档流中取出。

以下是一个示例，向您展示了一些可以使用的技巧：http://jsfiddle.net/Tn5c3/

CSS

#a, #b {
    padding: 10px;
    margin:10xp
}

#a {
    background: #aa0000;
}
#b {
    background: #00aa00;
    overflow: auto;
}
p {
    background: #0000aa;
    padding: 5px;
}

.clear {
    clear:both;
    height: 50px;
}

JS

$('#bb').click(function() {
    addChild($('#b')); 
});

$('#ba').click(function() {
    addChild($('#a')); 
});


function addChild(parent) {
    var child = $('<p>floated para</p>').css({
        'float': 'left'
    });
    parent.append(child);
}

HTML

<button id='ba'>Add to A</button>
<button id='bb'>Add to B</button>


<div id='a'></div>
<div class='clear'></div>
<div id='b'></div>

为什么容器div高度没有更新？

1 个答案: