cabecera fija de posición en html

Question

Tengo un encabezado (altura dinámica) con una posición fija.

necesito para colocar el contenedor div justo debajo de la cabecera. Como la altura del encabezado es dinámica, no puedo usar el valor fijo para el margen superior.

¿Cómo se puede hacer esto?

Aquí es mi 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*/ 
} 

... y 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

Bien! Cuando vi mi pregunta ahora, me di cuenta de que no quería mencionar el valor de margen fijo debido a la altura dinámica del encabezado.

Aquí es lo que he estado utilizando para tales escenarios.

calcular la altura de cabeza usando jQuery y aplicar que como valor del margen superior.

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

Demo

Answer 2

Su #container debe estar fuera de la cabecera #-wrap, a continuación, especifique una altura fija para # Header wrap, after, especifica margin-top para #container igual al # header-wrap's height. Algo como esto:

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

espero que esto es lo que necesita: http://jsfiddle.net/KTgrS/

Answer 3

Asumo que su cabecera se fija porque quiere que se quede en la parte superior de la página, incluso cuando el usuario se desplaza hacia abajo, pero no quieres que cubra el contenedor. Sin embargo, el ajuste position: fixed elimina el elemento del diseño lineal de la página, por lo que necesitaría establecer el margen superior del elemento "siguiente" para que sea igual al alto del encabezado o (si por alguna razón no lo hace) t quiero hacer eso), ponga un elemento de marcador de posición que ocupe espacio en el flujo de la página, pero que aparezca debajo de donde se muestra el encabezado.

Answer 4

La position :fixed es diferente a la otra disposición. Una vez que fixedposition para su header, tenga en cuenta que tiene que configurar el margin-top para el content div.

Answer 5

conjunto #container div superior a cero

#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; 
}