包装多个叠加的div

Question

TLDR：如何让容器包装多个叠加的流体高度 div？

我有一个包含一些对象的 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>

基于用户操作，我想在 a 淡出时淡入 b（即交叉淡入淡出）。这要求它们都与container 的左上角对齐。通常，我只会使用 position: absolute; 和默认值 top: 0; 和 left: 0; 来叠加它们。这样做的问题是，容器会塌陷到 0px 高（而不是我想要的其内容的高度），因为 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 个元素，这将很快变得笨拙。