Обтекание нескольких наложенных друг на друга divs

Question

TLDR: Как получить контейнер для обертывания нескольких наложенных друг на друга разделов по высоте жидкости?

У меня есть DIV с некоторыми объектами:

<div class="container"> 
    <div class="a" style="height: 300px;">Tab page a</div> 
    <div class="b" style="height: 100px; display: none;">Tab page b</div> 
    <div class="c" style="height: 200px; display: none;">Tab page c</div> 
    ... 
</div> 

На основе действий пользователя, я хочу, чтобы исчезнуть b как a исчезает (т.е. кроссфейд их). Это требует, чтобы оба они были выровнены в верхнем левом углу container. Обычно я просто использовал position: absolute; со значениями по умолчанию top: 0; и left: 0;, чтобы наложить их. Проблема заключается в том, что тогда контейнер обрушивается на 0px tall (а не на высоту его содержимого, который я хочу), поскольку a и b были удалены из потока.

Хорошо, поэтому я не могу использовать абсолютное позиционирование пользователя на a и b. Как еще я могу заставить их перекрыться? Отрицательный margin-top также не будет работать, так как я не знаю высот детей (они могут динамически меняться в зависимости от их содержимого), и их может быть любое число.

Возможно ли это даже без JS? Если это не так, то какой наименее опасный способ, который не предполагает A) небольшое число детей в container или B), дети фиксированного размера (известны заранее или иначе).

Answer 1

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

метод

Javascript я описал можно увидеть в действии здесь: http://jsfiddle.net/mkd9s/2/

важная часть:

// Get Heights 
var aHeight = $('.a').height(), 
    bHeight = $('.b').height(); 

// Set Height on Load 
$('.container').height(aHeight); 

// Fade on Click 
$('.fade').on('click', function(event) { 
    event.preventDefault(); 
    $('.a').fadeOut("slow"); 
    $('.b').fadeIn("slow"); 
    $('.container').animate({ height: bHeight }); 
}); 

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

Обратите внимание, что это быстро станет громоздким, если в контейнере имеется более 2 элементов.