Question

上有一个例子

如果它不起作用

HTML：

<div class="container">
   <div class="absolute">
       Testing absolute<br />
       Even more testing absolute<br />
   </div>
   A little test<br />
</div>

CSS：

.container {
    background: green;
}
.absolute {
    position: absolute;
    background: red;
}

问题

我使用jQuery创建一个滑块效果。要做到这一点，我需要设置绝对位置。

我的代码中的红色块是位置绝对滑块。
绿色区块是容器。

我仍然希望通过它的孩子身高来设置容器。由于绝对的位置现在它不知道它。溶液

Answer 1

绝对定位的元素在流量和大小方面不计入容器的内容。一旦你绝对定位了一些东西，它就好像它不存在于容器所关注的那样，所以容器无法通过CSS从孩子那里“获取信息”。

如果您必须允许您的滚动条具有由其子元素确定的高度而不使用Javascript，则您唯一的选择可能是使用相对定位。

Answer 2

然后你还需要使用jQuery来修复容器div的高度。像这样：

http://jsfiddle.net/khalifah/SsYwH/24/

$( document ).ready(function() {
    $( ".container" ).each(function() {
        var newHeight = 0, $this = $( this );
        $.each( $this.children(), function() {
            newHeight += $( this ).height();
        });
        $this.height( newHeight );
    });
});

但这是错误的，因为绝对定位的元素可以位于它的容器之外。你究竟是什么东西会在视图中找到包含div中最低位置的元素的底部。

Answer 3

jQuery('.container > .absolute').each(function() {
    jQuery(this).parent().height('+=' + jQuery(this).height());
    jQuery(this).css('position', 'absolute');
});

.container {
    background: green;
    position: relative;
}
.absolute {
    position: absolute;
    background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <div class="absolute">Testing absolute<br />Even more testing absolute<br /></div>
    Yo
</div>

这应该做你想要的。请注意，这假定绝对定位的元素必须是直接子元素。

另请注意，如果您希望父元素的子元素高度为100％，则可以删除高度函数中的'+=' +。

http://jsfiddle.net/SsYwH/21/

Answer 4

你可以用jquery做这样的事情。调用ghoape（jqueryElement）。

var ghoape = function getHeightOfAbsolutelyPositionedElement( element ){
    var max_y = 0;
    $.each( $(element).find('*'), function(idx, desc){
        max_y = Math.max(max_y, $(desc).offset().top + $(desc).height() );

    });

    return max_y - $(element).offset().top; 
}

这将遍历所有后代并找到最大高度并返回childs.offset（）+其高度之间的差异，然后从元素中减去它偏移量。

jQueryUI滑块：绝对定位元素＆amp;父容器高度

4 个答案: