vendredi 11 octobre 2013

height 100% et marges

Voici un problème que j'ai déjà rencontré plusieurs fois : mettre un bloc en height 100% avec un padding ou un margin top ou bottom. Vu que les marges s'ajoutent à la valeur de la hauteur, celle-ci fait au final plus de 100%, et ne rend pas l'effet escompté !

L'astuce est donc de mettre votre bloc en position absolute et de définir top/bottom/left/right à 0.

Exemple :

<html>
  <body>
    <div>mon bloc</div>
  </body>
</html>

html, body {
  height:100%;
}

div {
  position:absolute;
  top:30px;
  bottom:0;
  left:0;
  right:0;
}

Au lieu de :

div {
  height:100%;
  padding-top:30px;
}

Aucun commentaire:

Enregistrer un commentaire