다른 콘텐츠 크기가 바뀔 때 div 위치에 애니메이션 적용

Question

콘텐츠 div와 첫 번째 div 아래에있는 다른 div가 있습니다. 첫 번째 div의 콘텐츠가 동적으로 변경되고 필요에 따라 높이가 변경됩니다. 일반적으로 두 번째 div의 위치는 첫 번째 div의 높이가 변경 될 때 자동으로 위아래로 부딪칩니다. 가급적 그냥 CSS와 JS (no jQuery)를 사용하여 두 번째 div의 움직임을 애니메이트 할 수 있습니까?

여기에 시각적있어 : 왼쪽에

처음에, 내 두 개의 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에 나와 있습니다.