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创建一个滑块效果。为此，我需要设置position为absolute。

• 代码中的红色块是position为absolute的滑块。
• 绿色块是容器。

我仍然希望该容器由其子元素的高度设置。现在它不知道这一点，因为position为absolute。解决方案？

- Jens Törnell

---

我们需要更多关于您的滑块如何工作的细节。 - Benjamin Crouzier

无法使用CSS完成，您必须使用JS / jQuery来实现此目的。 - mreq

是的，绝对定位元素会打破正常流程，以便它们可以被“绝对”定位。让它们影响其他元素的流程将违反或重新定义绝对位置的含义。虽然我认为在某个时候，我们都希望至少有一个绝对定位元素来使其容器保持高度。这有点讽刺。 - b01

使用jQueryUI滑块效果可能会有问题，但可以使用jQueryUI动画效果轻松实现：保留position: relative并使用动画更改margin-left值，例如$(".sliding-element").animate({ marginLeft:'400px' }, 500);。 - Adriano

Answer 1

绝对定位元素在流动和尺寸方面不计入容器内容。一旦您将某物绝对定位，就好像它不存在于容器中一样，因此容器无法通过CSS从子元素“获取信息”。

如果您必须允许滚动条高度由其子元素确定而无需使用Javascript，则唯一选择可能是使用相对定位。

- Steven

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 中最低元素的底部。

- b01

---

希望有人能够提供一个简单易懂的CSS解决方案来解决这个问题。 - b01

根据您的问题约束条件，https://dev59.com/lGMk5IYBdhLWcg3w0RCU#18963170 可能作为CSS解决方案是可接受的。它可以很好地处理高度，但请注意它会忽略宽度。 - Jasmine Hegman

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/

- Tyler Crompton

Answer 4

你可以使用 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; 
}

这将遍历所有后代元素，找到最大高度，并返回子元素的偏移量加上其高度与元素偏移量之间的差值，然后从元素偏移量中减去该差值。

- Leon