具有绝对/固定子项的父容器上的自动高度

Question

我试图设置一个自动高度div包含2个子元素,定位固定,绝对绝对.

我希望我的父容器具有自动高度但我知道这很难,因为子元素从页面结构中取出它们的位置.

我已经尝试将高度设置为我的父div工作,但是我的布局响应,当它缩小到移动时,高度保持相同,其中内容变得堆叠,因此高度需要随着其子项而增加.

不确定这是否有意义,我没有我的实际代码在我自己,但我做了一个小提琴试图解释...

http://jsfiddle.net/dPCky/

Answer 1

当父子height:auto被定位为绝对/固定时,父div不能使用.

您需要使用JavaScript来实现此目的.

jQuery中的一个例子:

var biggestHeight = 0;
// Loop through elements children to find & set the biggest height
$(".container *").each(function(){
 // If this elements height is bigger than the biggestHeight
 if ($(this).height() > biggestHeight ) {
   // Set the biggestHeight to this Height
   biggestHeight = $(this).height();
 }
});

// Set the container height
$(".container").height(biggestHeight);

工作示例 http://jsfiddle.net/blowsie/dPCky/1/

Answer 2

http://jsfiddle.net/dPCky/32/ - 使用类似的效果float:left;

http://jsfiddle.net/dPCky/40/ - 您想要的效果更接近结果.

如果你愿意改变你的HTML,那么你可以做我上面做的事情.

我从以下教程中学到了定位,我强烈推荐给想要成为html/css中的定位专业人士的人:

http://www.barelyfitz.com/screencast/html-training/css/positioning/

如果你愿意调整你的html,我通常会避免在做可能有css或html级别修复的事情时尽可能使用javascript.

Answer 3

如果你不想使用 JavaScript，你可以参考这个答案/sf/answers/2365183341/。

简短说明：复制一个元素并将可见性设置为隐藏以展开父元素。