在其他内容大小更改时动画div位置

Question

我有一个内容div，另一个div位于第一个div下面。第一个div的内容会动态变化，其高度会根据需要发生变化。通常，当第一个div的高度发生变化时，第二个div的位置会自动上下颠簸。我怎样才能动画第二个div的运动，最好只使用CSS和JS（没有jQuery）？

这是一个视觉：

左边是我的两个div，最初。有时，div1会在高度上扩展以适应其内容，并且div2会被按下。我怎样才能为div2的运动设置动画？

Answer 1

  

  
• 演示： http://jsbin.com/uwoxek
  

function init() {
    var header = document.getElementById('header');
    var header_height = header.offsetHeight;
    header.style.height = '10px';
    header.style.overflow = 'hidden';
    var i = 0;
    var animation = setInterval(function () {
        if (i <= header_height) {
            header.style.height = (10 + i) + 'px';
        } else {
            clearInterval(animation);
            header.style.overflow = 'block';
        }
        i++;
    }, 10); 
}

好的，也许需要一些注意事项？ 你必须移动的不是“第二”div，而是“第一”，通过移动将自动推动第二个底部（或第一个结束）希望这个帮助

Answer 2

演示：http://jsfiddle.net/xS3y7/

#div1 {
    width: 50px; // Parent div needs width and height for this to work.
    height: 50px;
    background-color : red;
    position: relative;
}

#div2 {
    position: absolute;  //positioning based on parent.
    width: 100%; // 100% width of parent
    height: 20%; // 20% width of parent
    background-color: blue;
    bottom: 0px; // Place on the bottom
}​

需要注意的重要一点是，父<div>必须具有绝对或相对定位，并且子<div>必须具有绝对值定位。绝对定位使其定位偏离其最近的父元素（在本例中为#div1）。绝对定位使我们能够将元素放置在任何我们想要的位置（与父元素相关），关闭计算值，因此这非常强大。

如需好好阅读，请查看Chris Coyier CSS-Tricks。