ustalona pozycja nagłówka w html

Question

Mam nagłówek (wysokość dynamiczna) ze stałą pozycją.

Potrzebuję umieścić pojemnik div tuż pod nagłówkiem. Ponieważ wysokość nagłówka jest dynamiczna, nie mogę użyć stałej wartości dla górnego marginesu.

Jak można tego dokonać?

Oto mój CSS:

#header-wrap { 
    position: fixed; 
    height: auto; 
    width: 100%; 
    z-index: 100 
} 
#container{ 
    /*Need to write css to start this div below the fixed header without mentioning top margin/paading*/ 
} 

... i HTML:

<div id="header-wrap"> 
    <div id="header"> 
    <div id="menu"> 
     <ul> 
     <li><a href="#" class="active">test 0</a></li> 
     <li><a href="#">Give Me <br />test</a></li> 
     <li><a href="#">My <br />test 2</a></li> 
     <li><a href="#">test 4</a></li> 
     </ul> 
    </div> 
    <div class="clear"> 
    </div> 
    </div> 
</div><!-- End of header --> 

<div id="container"> 
</div> 

Answer 1

dobrze! Gdy zobaczyłem teraz moje pytanie, zdałem sobie sprawę, że nie chcę wspominać o stałej wartości marginesu z powodu dynamicznej wysokości nagłówka.

Oto, czego używałem do takich scenariuszy.

Obliczyć wysokość nagłówka za pomocą jQuery i zastosować jako najwyższy margines.

var divHeight = $('#header-wrap').height(); 
$('#container').css('margin-top', divHeight+'px'); 

Demo

Answer 2

Twój #container definiuje powinny być poza # header-oblewania, następnie określić stałą wysokość dla # header- wrap, after, podaj margin-top dla #container równą wysokości # wrap-wrap. Coś takiego:

#header-wrap { 
    position: fixed; 
    height: 200px; 
    top: 0; 
    width: 100%; 
    z-index: 100; 
} 
#container{ 
    margin-top: 200px; 
} 

nadzieję, że to, czego potrzebujesz: http://jsfiddle.net/KTgrS/

Answer 3

I zakładamy, że nagłówek jest stała, ponieważ chcesz, aby zatrzymać się w górnej części strony, nawet gdy użytkownik przewija w dół, ale nie chcesz, żeby zakrywał pojemnik. Ustawienie position: fixed usuwa element z układu liniowego strony, więc musisz ustawić górny margines "następnego" elementu tak, aby był taki sam jak wysokość nagłówka, lub (jeśli z jakiegoś powodu nie jesteś t chcesz to zrobić), umieść element zastępczy, który zajmuje miejsce w przepływie strony, ale pojawi się pod tym, gdzie pojawi się nagłówek.

Answer 4

Urządzenie position :fixed różni się od innego układu. Po fixedposition dla swojego header, należy pamiętać, że należy ustawić margin-top dla elementu div .

Answer 5

zestaw #container definiuje div top do zerowej

#container{ 


top: 0; 



} 

Answer 6

body{ 
    margin:0; 
    padding:0 0 0 0; 
} 
div#header{ 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:25; 
} 
@media screen{ 
body>div#header{ 
    position: fixed; 
} 
} 
* html body{ 
    overflow:hidden; 
} 
* html div#content{ 
    height:100%; 
    overflow:auto; 
}