位置：绝对和高度答案

【问题标题】：position:absolute and height位置：绝对和高度
【发布时间】：2011-09-27 18:30:49
【问题描述】：

我有这个例子http://jsfiddle.net/HnfCU/ 我使用 jQuery 来显示和隐藏 .child div。 .child 绝对定位于.parent 我试图解决的问题是.child 的高度。

我希望.child 的背景覆盖整个区域。现在，使用height:100% 部分覆盖它。我不能使用固定高度，因为内容是动态的。

任何方法，css 或 javascript[jQuery] 都是可以接受的，或者结构上的任何改变。

【问题讨论】：

你肯定只需要创建.child 的子元素position: absolute，因为在计算.child 的高度时它们不会被包括在内，因为它们也不是绝对定位的。如果你只添加.child * { position: absolute }，它将包含这些子元素，并被背景包围，但你必须做一些额外的样式才能使间距正确。
@jerluc 感谢您的回答。 .child 的子元素被包围，因为使用position:absolute 它们位于.child 的左上角。但是使用top 或margin-top 或padding-top 将它们移出.child 的背景。

【解决方案1】：

只需从.child 样式中删除bottom: 5px; 样式即可。

它将子 div 的底部放置在父 div 底部上方五个像素的位置，但是由于您将子 div 的顶部放置在父 div 底部的下方，这将导致负高度，因此浏览器只需将高度设置为最接近的可能值，即零。

同时删除height: 100% 样式，因为这只会使子项与专利具有相同的高度，这是您不希望的，因为您不会在父项中显示子项。

【讨论】：

【解决方案2】：

如果我理解正确，删除 bottom: 5px 和 height: 100% 会得到你想要的：http://jsfiddle.net/blineberry/HnfCU/1/

这允许.child 从其内容中获取其高度。

【讨论】：