0

我有一个带有一些子 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;
}
4

4 回答 4

3

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

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

于 2012-05-14T16:39:08.003 回答
2

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

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

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

于 2012-05-14T16:40:28.220 回答
1

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

.css('minHeight', newParentHeight);
于 2012-05-14T16:41:14.733 回答
0

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

例如

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

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

解决跨浏览器问题

于 2012-05-14T16:41:00.200 回答