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

【问题标题】：jQueryUI slider: absolutely positioned element & parent container heightjQueryUI 滑块：绝对定位元素和父容器高度
【发布时间】：2016-04-20 02:27:23
【问题描述】：

我有一个关于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 创建滑块效果。为此，我需要设置绝对位置。

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

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

【问题讨论】：

我们需要更多关于您的滑块工作原理的详细信息
不能用css，你得用js/jQuery来做这个
是的，绝对定位元素打破了正常流程，因此它们可以“绝对”定位。让它们影响其他元素的流动将违背或重新定义当前绝对位置的含义。尽管我认为在某些时候，我们都希望拥有一个绝对位置元素，以至少使其容器保持其高度。这有点讽刺。
使用 jQueryUI 滑块效果可能会出现问题，使用 jQueryUI 动画效果可以很容易地实现此效果：保留 position: relative 并使用动画更改 margin-left 值，例如 $(".sliding-element").animate({ marginLeft:'400px' }, 500);

标签： css jquery-ui position height absolute

【解决方案1】：

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

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

【讨论】：

【解决方案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 中最低的元素底部的东西。

【讨论】：

希望有人能为这个问题提供一个简单易用的 CSS 解决方案。
根据您的问题的限制，stackoverflow.com/a/18963170/1347604 可能是可接受的 CSS 解决方案。它可以很好地处理高度，但请注意它会忽略宽度。

【解决方案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/

【讨论】：

【解决方案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; 
}

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

【讨论】：