其他内容大小更改时为 div 位置设置动画答案

【问题标题】：Animate div position when other content size changes其他内容大小更改时为 div 位置设置动画
【发布时间】：2012-05-07 02:12:59
【问题描述】：

我有一个内容 div，还有一个位于第一个下方的 div。第一个 div 的内容是动态变化的，它的高度也会根据需要而变化。通常，随着第一个 div 的高度变化，第二个 div 的位置会自动上下颠簸。如何为第二个 div 设置动画，最好只使用 CSS 和 JS（不使用 jQuery）？

这是一个视觉效果：

左边是我的两个 div，最初。有时，div1 会扩大高度以适应其内容，然后将 div2 向下推。如何为 div2 的运动设置动画？

【问题讨论】：

只有 CSS 很难...
Dhaivat 是对的。您希望您的页脚动画到内容 div 的底部，但是如果不使用 JS，这可能是不可能的。
Dhaivat Pandya，DanRedux：OP 要求至少 CSS 和 JS
我对 CSS 和 JS 很满意。我不熟悉 jQuery 并且对它的语法不满意，但是如果有人可以提供清晰的示例代码，我会使用 jQuery。
在没有 js 库的情况下尝试成功的跨浏览器动画就像要一杯没有杯子的水......

标签： javascript css html

【解决方案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，而是“第一个”，通过移动会自动将第二个推到底部（或第一个的末尾）希望这有帮助

【讨论】：

【解决方案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）定位。绝对定位使我们能够将元素放置在我们想要的任何位置（相对于父元素），计算值关闭，所以这真的很强大。

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

【讨论】：