Question

我有一个带有一些子div的父div。如果我在父div中的任何子节点上调用以下代码，则不对父div执行任何操作：

$('.child').height(newHeight);

父div将根据其子女的所有高度来符合新的身高。

但是，如果我像这样设置父级的高度：

$("#parent").height(newParentHeight);

然后以与上述相同的方式更改任何子项的高度，父项的高度不符合基于其子项所有高度的新高度。基本上，父级的高度被“锁定”到我通过.height（）方法发送的高度。

有没有办法确保父div符合其所有孩子的高度，即使我使用上面的代码设置父亲的身高？

更新1：根据要求，这里是父div的CSS：

#workarea
{
    overflow: hidden;
    border-bottom: 1px solid white;
    border-left: 1px solid grey;
    border-right: 1px solid white;
    background: #ccc;
}

Answer 1

.height()通过直接设置DOM元素的CSS样式，将div的高度锁定为您指定的任何内容。如果要将CSS样式恢复正常，则应明确取消设置CSS样式：

$('#parent').css('height', '')

Answer 2

您可以尝试（而不是使用height()）在元素上设置min-height。使用jQuery：

$("#parent").css("minHeight", "100px");

旧浏览器可能存在一些问题。

Answer 3

.height()给出元素的显式高度。也许在您的情况下.css('minHeight')可以提供帮助。（在执行此操作时，请考虑跨浏览器兼容性。）

.css('minHeight', newParentHeight);

Answer 4

您不应使用CSS或jquery为父div设置任何高度。然后设置子高度将改变父高度。

For example

注意您可以使用jQuery CSS方法将高度设置为子级，即：

$('.child').css('height', 'some');

解决跨浏览器问题

在父div上使用.height（）之后，更改高度的子元素不再影响父级的高度，为什么？

4 个答案: