817 votes

CSS 100% de la hauteur avec un rembourrage/marge

Cela a été me rend fou pour un couple de jours maintenant, mais en réalité, c'est un problème que j'ai frappé, et pour les quelques dernières années: Avec HTML/CSS comment puis-je faire un élément qui a une largeur et/ou hauteur de 100% de son élément parent et a toujours le bon rembourrage ou des marges?

Par "bon", je veux dire que si mon élément parent est de 200px de haut et je précise à 100% de la hauteur avec 5px rembourrage je m'attends à ce que je devrais obtenir un 190px haut élément avec 5px "frontière" sur tous les côtés, bien centré dans l'élément parent.

Maintenant, je sais que ce n'est pas le standard du modèle de boîte spécifie qu'il doit travailler (bien que j'aimerais savoir pourquoi, exactement...), donc la réponse la plus évidente, ne fonctionne pas:

#myDiv {
    width: 100%
    height: 100%;
    padding: 5px;
}

Mais il me semble qu'il doit y avoir un moyen fiable d'produisant cet effet pour un parent de taille arbitraire. Personne ne sait d'une façon de régler ce problème (apparemment simple) de la tâche?

Oh, et pour le dossier je ne suis pas vraiment intéressée dans IE compatibilité, de sorte que devrait (on l'espère) de faire des choses un peu plus facile.

EDIT: Depuis un exemple a été demandé, voici le plus simple je pense:

<html style="height: 100%">
    <body style="height: 100%">
        <div style="background-color: black; height: 100%; padding: 25px"></div>
    </body>
</html>

Le défi est alors d'obtenir la boîte noire pour montrer avec un pas de 25 pixels rembourrage sur tous les bords, sans la page de croissance assez grosse pour exiger que les barres de défilement.

763voto

Frank Schwieterman Points 13519

J'ai appris à faire ce genre de choses à la lecture de "PRO HTML et CSS Design Patterns". L' display:block est l'affichage par défaut de la valeur pour l' div, mais je tiens à le rendre explicite. Le conteneur doit être le bon type; position attribut est - fixed, relativeou absolute.

.stretchedToMargin {
    display: block;
    position:absolute;
    height:auto;
    bottom:0;
    top:0;
    left:0;
    right:0;
    margin-top:20px;
    margin-bottom:20px;
    margin-right:80px;
    margin-left:80px;
    background-color: green;
}

HTML

<div class="stretchedToMargin">
  Hello, world
</div>

Tripoter par Nooshu de commentaire

395voto

Marco Jardim Points 1951

Il y a une nouvelle balise CSS3 que vous pouvez utiliser pour changer la façon dont le modèle de boîte calcule la largeur/hauteur, il est appelé box-sizing.

Par la définition de cette propriété avec la valeur "border-box", il est toujours l'élément de l'appliquer de ne pas étirer lorsque vous ajoutez un rembourrage ou à la frontière. Si vous définissez quelque chose avec 100px de largeur, et 10px marge, il sera toujours 100px de large.

-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
     -o-box-sizing: border-box;
        box-sizing: border-box;

Il ne fonctionne pas pour IE7 et inférieur, cependant, je crois que Dean Edward IE7.js ajoute la prise en charge. Enjoy :)

66voto

amolk Points 767

La solution est de ne PAS utiliser la hauteur et la largeur à tous! Fixez la boîte intérieure à l'aide de haut, à gauche, à droite, en bas, puis ajoutez la marge.

<style>
  .box {margin:8px; position:absolute; top:0; left:0; right:0; bottom:0}
</style>

<div class="box" style="background:black">
  <div class="box" style="background:green">
    <div class="box" style="background:lightblue">
      This will show three nested boxes. Try resizing browser to see they remain nested properly.
    </div>
  </div>
</div>

40voto

Brian Aderer Points 131

La meilleure façon est avec le calc() de la propriété. Si votre cas ressemblerait à:

#myDiv {
    width: calc(100% - 5px);
    height: calc(100% - 5px);
    padding: 5px;
}

Simple, propre, aucune solution de rechange. Assurez-vous de ne pas oublier l'espace entre les valeurs et l'opérateur (par exemple (100%-5px) qui va briser la syntaxe. Profitez-en!

21voto

Alex Points 6968

Selon le w3c spec hauteur se réfère à la hauteur de la zone visible par exemple sur une résolution de 1280x1024 pixels de résolution d'écran 100% height = 1024 pixels.

min-height désigne la hauteur totale de la page, y compris le contenu sur une page où le contenu est plus grand que 1024px min-height:100%, va s'étendre à l'ensemble du contenu.

L'autre problème est alors que le rembourrage et la frontière sont ajoutés à la hauteur et la largeur dans la plupart des navigateurs modernes, sauf ie6(ie6 est en fait assez logique, mais n'est pas conforme à la spécification). Ceci est appelé le modèle de boîte. Donc, si vous spécifiez

min-height: 100%;
padding: 5px; 

Il sera effectivement vous donner 100% + 5px + 5px pour la hauteur. Pour contourner cela, vous avez besoin d'un wrapper conteneur.

<style>
    .FullHeight { 
       height: auto !important; /* ie 6 will ignore this */
       height: 100%;            /* ie 6 will use this instead of min-height */
       min-height: 100%;        /* ie 6 will ignore this */
    }

    .Padded {
       padding: 5px;
    }
</style>

<div class="FullHeight">
   <div class="Padded">
      Hello i am padded.
   </div
</div>

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X