19

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

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

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

4

4 回答 4

24

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

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

于 2011-09-06T14:18:45.447 回答
7

然后你还需要使用 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 中最低的元素的底部，相对于视图。

于 2011-09-06T14:23:16.713 回答
5 

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% 高度，请删除 height 函数中的 。

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

于 2011-09-06T14:23:31.147 回答
2

你可以用 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() + 其高度之间的差异，然后从元素偏移量中减去该差异。

于 2013-12-26T20:55:16.707 回答