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的元素的底部,相对于视图。

http://stackoverflow.com/questions/7321281/jqueryui-slider-absolutely-positioned-element-parent-container-height

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:css – jQueryUI滑块:绝对定位的元素和父容器高度