Ползунок 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 для создания эффекта слайдера. Для этого мне нужно установить абсолютную позицию.

• Красный блок в моем коде - это ползунок абсолютного положения.
• Зеленый блок - это контейнер.

Я все еще хочу, чтобы контейнер был установлен по его дочерней высоте. Теперь он не знает этого из-за абсолютной позиции. Решение

Answer 1

Абсолютно расположенные элементы не учитываются в отношении содержимого контейнера с точки зрения расхода и размеров.Как только вы разместите что-либо абсолютно, это будет выглядеть так, как если бы оно существовало с точки зрения контейнера, поэтому контейнер не сможет «получить информацию» от дочернего элемента через CSS.

Если вам необходимоПозвольте вашему скроллеру иметь высоту, определяемую его дочерними элементами без Javascript, ваш единственный выбор - использовать относительное позиционирование.

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, по отношению к представлению.

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/

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; 
}

Это пройдет через все потомков , найдет максимальную высоту и вернет разницу между childs.offset () + его высотой, а затем вычтет ее из смещения элементов.