1

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已经从流中删除。

好的，所以我不能在aand上使用绝对定位b。我还能如何让它们重叠？否定margin-top也行不通，因为我不知道孩子的身高（他们可以根据他们的内容动态变化），并且可能有任意数量的孩子。

如果没有 JS，这甚至可能吗？如果不是，那么不假设 A）少数孩子container或 B）孩子的大小是固定的（提前或以其他方式知道）的最简单的方法是什么。

4

1 回答 1

0

如果您知道交叉淡入淡出元素的尺寸，最好的办法是设置容器元素的高度和宽度，如果您只需要一个宽度/高度，则通过 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 个元素，这将很快变得笨拙。

于 2013-09-12T07:15:52.713 回答