동적으로 CSS 패딩 맨 위로 설정

Question

내 웹 페이지 레이아웃에 사용하는 DIV의 구조를 변경해야 할 수도 있습니다.

<div id="container_slider"></div> 
<div id="container_content"> 
    <div id="main"> 
    <div id="header"></div> 
    <div id="content"></div> 
    </div> 
</div> 

<style> 
    #container_slider {position: absolute; top: 0; z-index: 1;} 
    #container_content {position: absolute: top: 0; z-index: 10;} 
    #main {width: 940px; margin: 0 auto;} 
    #header {width: 170px; float: left;} 
    #content {width: 760px; float: right;} 
</style> 

내가는 #header이 #container_slider를 오버레이 표시 할,하지만 난 #content가 #container_slider 아래에 수직으로 표시 할 : this page에

, 나는있다.

문제는 #container_slider의 내용이 반응적이어서 #container_slider의 높이가 브라우저 크기에 달려 있다는 것입니다.

즉, #content에 대해 정확한 패딩 윗부분을 설정할 수 없습니다.

# content 's padding-top을 value = height (#slider_container) + 10으로 동적으로 설정할 수있는 방법이 있습니까?

아니면 DIV를 구성하는 방식을 조정해야합니까?

Answer 1

이에 의해 문서 준비 기능에 대한 높이를 확인할 수 있습니다

이

var heightSlider = $('#container_slider').height(); 

그런 내용 패딩 탑과 동일하게 적용

$('#content').css({ paddingTop : heightSlider + 30 + 'px' }); 

Demo