Ползунок jQueryUI: абсолютно позиционированный элемент и высота родительского контейнера

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

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

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

Ответ 1

Тогда вам также понадобится использовать 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 по отношению к представлению.

Ответ 2

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

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

Ответ 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>

Ответ 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() + его высотой и затем вычесть из смещения элементов.