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

jQueryUI slider: absolutely positioned element & parent container height

提问by Jens T?rnell

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

我在http://jsfiddle.net/SsYwH/上有一个例子

In case it don't work

如果它不起作用

HTML:

HTML：

<div class="container">
   <div class="absolute">
       Testing absolute<br />
       Even more testing absolute<br />
   </div>
   A little test<br />
</div>

CSS:

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.

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

• 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?

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

采纳答案by b01

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

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

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

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.

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

回答by Steven

Absolutely positioned elements do not count towards the container's contents in terms of flow and sizing. Once you position something absolutely, it will be as if it didn't exist as far as the container's concerned, so there's no way for the container to "get information" from the child through CSS.

绝对定位的元素在流量和大小方面不计入容器的内容。一旦你绝对定位了一些东西，就容器而言，它就好像它不存在一样，所以容器无法通过 CSS 从孩子那里“获取信息”。

If you must allow for your scroller to have a height determined by its child elements without Javascript, your only choice may be to use relative positioning.

如果您必须允许您的滚动条在没有 Javascript 的情况下具有由其子元素确定的高度，则您唯一的选择可能是使用相对定位。

回答by Tyler Crompton

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>

This should do what you are wanting. Note that this assumes that the absolutely positioned element must be an immediate child.

这应该做你想要的。请注意，这假定绝对定位的元素必须是直接子元素。

Also note that you remove the '+=' +in the height function if you want the parent element to have 100% height of it's child element.

另请注意，'+=' +如果您希望父元素具有其子元素的 100% 高度，请删除height 函数中的 。

http://jsfiddle.net/SsYwH/21/

http://jsfiddle.net/SsYwH/21/

回答by Leon

You can do something like this with jquery. Call ghoape(jqueryElement).

你可以用 jquery 做这样的事情。调用 ghoape(jqueryElement)。

var ghoape = function getHeightOfAbsolutelyPositionedElement( element ){
    var max_y = 0;
    $.each( $(element).find('*'), function(idx, desc){
        max_y = Math.max(max_y, $(desc).offset().top + $(desc).height() );

    });

    return max_y - $(element).offset().top; 
}

This will go through all the descendantsand find the max height and return the difference between the childs.offset() + its height and then subtract that from the elements offset.

这将遍历所有后代并找到最大高度并返回 childs.offset() + 其高度之间的差异，然后从元素偏移量中减去该差异。