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>

根据用户操作，我希望淡出b，因为a淡出（即交叉渐变）。这要求它们都与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个元素，这将很快变得难以处理。

包装多个叠加的div

1 个答案: