div가 고정 헤더로 올바르게 위치 지정되지 않습니다.

position:fixed 인 헤더가 있습니다. 이 같이 잘 작동 이제div가 고정 헤더로 올바르게 위치 지정되지 않습니다.

width: 1007px; 
padding: 60px 0 0 0; 
display: block;

:이 헤더 내에서 다음과 같은 CSS를 가지고있는 헤더 DIV 아래 용기라는 사업부가 지금 min-height: 60px

의 변수 높이입니다 사업부,이 헤더는 60px이지만 헤더 높이가 증가하면 컨테이너 상단이 헤더에 의해 가려집니다. 머리말 높이가 90px로 동적으로 변경되면이 새로운 높이에 따라 컨테이너 div가 아래로 이동하게하려면이 문제를 해결하려면 어떻게해야합니까? 당신이 발생하는 것은 헤더 위치를 고정 이후 정상적인 동작이

<div id="wrapper"> 
<header style="width: 100%; display: block; position: fixed; z-index: 1;"> 
    <div class="b-block" style="min-height:60px;display: block;">blah blah</div> 
</header> 
<div id="container" style="width: 1007px; padding: 60px 0 0 0; display: block;">blah blah</div> 
</div>

출처

2013-05-31 user1038814

** container **는'header'처럼 _fixed_하지 않기 때문에 ** CSS **에서는 불가능하다고 생각합니다. 그럼에도 불구하고 여기에 [JQuery 솔루션] (http://jsfiddle.net/vucko/57hvR/)이 있습니다. – Vucko

문제가 그 위치에 있습니다 : 고정 세트에 –

@ Vucko - 감사합니다, 안타깝게도, 솔루션 관리자가 높이를 높이기 위해 헤더의 div에 내용을 추가했을 때 해결책이 작동하지 않았습니다. 컨테이너 dv는 아래로 움직이지 않았다. – user1038814

다음과 같이

html로입니다. 헤더 내용이 변경되면 원하는 내용을 얻는 유일한 방법은 javascript를 사용하여 #container의 패딩을 동적으로 변경하는 것입니다. http://codepen.io/seraphzz/pen/milpv

당신은 헤더의 높이를 얻고 #container div에 대한 최고 패딩으로 설정 :

다음은 예입니다.

출처

2013-06-01 00:52:35 Raz

div가 고정 헤더로 올바르게 위치 지정되지 않습니다.

답변

관련 문제