jQueryUI 滑块:绝对定位元素 &父容器高度 [英] jQueryUI slider: absolutely positioned element & parent container height

问题描述

我有一个关于 http://jsfiddle.net/SsYwH/

的例子

万一它不起作用

HTML:

<div class="absolute">测试绝对<br/>甚至更多的测试绝对<br/>
一个小测试<br/>

CSS:

.container {背景:绿色；}.绝对{位置:绝对；背景:红色；}

问题

我使用 jQuery 来创建滑块效果.为此，我需要设置绝对位置.

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

我仍然希望容器由它的孩子的高度来设置.现在它不知道它，因为位置绝对.解决方案?

解决方案

那么你还需要使用 jQuery 来固定容器 div 的高度.像这样:

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

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

然而这是错误的，因为绝对定位的元素可以位于它的容器之外.相对于视图，您会找到位于包含 div 中最低位置的元素底部的东西.

I have an example on http://jsfiddle.net/SsYwH/

In case it don't work

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;
}

Problem

I use jQuery to create a slider-effect. To do that I need to set position absolute.

• The red block in my code is the position absolute slider.
• The green block is the container.

I still want the container to be set by it's childs height. Now it don't know it because of the position absolute. Solution?

解决方案

Then you'll also need to use jQuery to fix the height of the container div. Like so:

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 );
    });
});

This is wrong however, since an absolute positioned element can sit outside of it's container. What you really what is something that will find the bottom of the element that sits lowest in the containing div, with respect to the view.

这篇关于jQueryUI 滑块:绝对定位元素 &父容器高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！