positionner l'en-tête fixe en html

Question

J'ai un en-tête (hauteur dynamique) avec une position fixe.

Je dois placer la division conteneur juste en dessous de l'en-tête. Comme la hauteur de l'en-tête est dynamique, je ne peux pas utiliser la valeur fixe pour la marge supérieure.

Comment cela peut-il être fait ?

Voici mon 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*/
}

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

Votre #container doit se trouver à l'extérieur du #header-wrap, puis spécifiez une hauteur fixe pour le #header-wrap, ensuite, spécifiez une margin-top pour le #container égale à la hauteur du #header-wrap. Quelque chose comme ceci :

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

J'espère que c'est ce dont vous avez besoin : http://jsfiddle.net/KTgrS/

Answer 2

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

Answer 3

Je suppose que votre en-tête est fixe parce que vous voulez qu'il reste en haut de la page même lorsque l'utilisateur fait défiler la page vers le bas, mais vous ne voulez pas qu'il recouvre le conteneur. Configuration de position: fixed supprime toutefois l'élément de la mise en page linéaire, de sorte que vous devez soit définir la marge supérieure de l'élément "next" de manière à ce qu'elle soit égale à la hauteur de l'en-tête, soit (si pour une raison quelconque vous ne souhaitez pas le faire), mettre un élément de remplacement qui prend de la place dans le flux de la page, mais qui apparaîtrait sous l'en-tête.

Answer 4

El position :fixed est différente des autres dispositions. Une fois que vous fixed le site position pour votre header gardez à l'esprit que vous devez définir le paramètre margin-top pour le content div.

Answer 5

Set #container div top a zéro

#container{ 

 top: 0;

}