css – jQueryUI滑块:绝对定位的元素和父容器高度

前端之家收集整理的这篇文章主要介绍了css – jQueryUI滑块:绝对定位的元素和父容器高度前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在 http://jsfiddle.net/SsYwH/上有一个例子

万一它不工作

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创建一个滑块效果。为了做到这一点,我需要设置绝对位置。

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

我仍然希望通过它的小孩高度设置容器。现在它不知道是因为绝对的位置。解?

解决方法

那么你还需要使用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的元素的底部,相对于视图。

猜你在找的CSS相关文章