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

Question

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

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

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

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/