web-dev-qa-db-fra.com

position en-tête fixe en html

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

J'ai besoin de placer le conteneur div juste en dessous de l'en-tête. La hauteur de l'en-tête étant 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>
jqueryhtmlcsshtml5css3
44
Sowmya

Bien! En voyant ma question maintenant, j'ai réalisé que je ne voulais pas mentionner une valeur de marge fixe en raison de la hauteur dynamique de l'en-tête.

Voici ce que j'ai utilisé pour de tels scénarios.

Calculez la hauteur de l'en-tête à l'aide de jQuery et appliquez-la en tant que valeur de la marge supérieure.

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

Démo

6
Sowmya

Votre #container doit être en dehors de l'en-tête # header-wrap, puis spécifier une hauteur fixe pour # header-wrap, après, spécifiez margin-top pour #container égal à la hauteur de # header-wrap. Quelque chose comme ça:

#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/

56
micnic
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;
}
3
Sorter

Je suppose que votre en-tête est corrigé parce que vous voulez qu'il reste en haut de la page même lorsque l'utilisateur fait défiler l'écran, mais vous ne voulez pas qu'il couvre le conteneur. Réglage position: fixed supprime l'élément de la présentation linéaire de la page, vous devez donc définir la marge supérieure de l'élément "suivant" pour qu'elle soit identique à la hauteur de l'en-tête, ou (si, pour une raison quelconque, vous ne le faites pas. vous ne voulez pas faire cela), mettez un élément fictif qui prend de la place dans le flux de page, mais apparaîtrait en dessous de l’en-tête.

2
nbrooks

Le position :fixed est différent de l'autre mise en page. Une fois que vous avez fixed le position pour votre header, gardez à l'esprit que vous devez définir le margin-top pour le content div.

2
RAN

définissez #container div haut sur zéro

#container{ 


 top: 0;



}
0
stay_hungry