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

问题描述

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

 < div class =container> 
< div class =absolute> 
测试绝对< br /> 
更多的测试绝对< br /> 
< / div> 
一点测试< br /> 
< / div> 
  

CSS：

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

问题

我使用jQuery创建滑块效果。

• 我的代码中的红色块是位置绝对滑块。

$ b 我仍然希望容器由childs的高度设置。现在它不知道它，因为位置绝对。解决方案？

解决方案

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

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

  $（document）.ready（function（）{
 $容器）.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屋！