CSS 100% hauteur avec rembourrage / marge

il y a une nouvelle propriété dans 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.

en plaçant cette propriété avec la valeur" border-box " il rend l'élément que vous appliquez pour ne pas étirer lorsque vous ajoutez un rembourrage ou une bordure. Si vous définissez quelque chose avec une largeur de 100px, et un rembourrage de 10px, il aura toujours une largeur de 100px.

box-sizing: border-box;

voir ici pour prise en charge du navigateur . Cela ne fonctionne pas pour IE7 et inférieur, cependant, je crois que le IE7 de Dean Edward.js ajoute le support pour cela. Enjoy:)

la solution est de ne pas utiliser la hauteur et la largeur du tout! Fixez la boîte intérieure en haut, à gauche, à droite, en bas et ajoutez la marge.

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

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

la meilleure façon est avec la propriété calc (). Donc votre affaire 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!

selon la hauteur de la spécification w3c se réfère à la hauteur de la zone visible par exemple sur un moniteur de résolution de 1280x1024 pixels 100% Hauteur = 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 le bord sont ajoutés à la hauteur et la largeur dans la plupart des modernes navigateurs sauf ie6 (ie6 est en fait tout à fait logique mais ne se conforme pas à la spécification). Ceci est appelé le modèle de boîte. Donc si vous spécifiez

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

il vous donnera en fait 100% + 5px + 5px pour la hauteur. Pour contourner cela, vous avez besoin d'un conteneur d'emballage.

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

C'est l'une des idioties de CSS - Je n'ai pas encore compris le raisonnement (si quelqu'un sait, pls. expliquer.)

100% signifie 100% de la hauteur du conteneur - à laquelle sont ajoutées les marges, les bordures et le rembourrage. Donc, il est effectivement impossible d'obtenir un conteneur qui remplit son parent et qui a une marge, bordure, ou rembourrage.

Note également, la hauteur de réglage est notoirement incohérente entre les navigateurs, aussi.

une autre chose que j'ai apprise depuis que j'ai posté ceci est que le pourcentage est relatif le conteneur longueur , c'est-à-dire, il est Largeur, ce qui rend un pourcentage encore plus sans valeur pour la hauteur.

de nos jours, les unités VH et vw viewport sont plus utiles, mais pas particulièrement utiles pour autre chose que les conteneurs de haut niveau.

1. Pleine hauteur avec padding

body {
  margin: 0;
}
.container {
  min-height: 100vh;
  padding: 50px;
  box-sizing: border-box;
  background: silver;
}

<div class="container">Hello world.</div>

2. Pleine hauteur avec margin

body {
  margin: 0;
}
.container {
  min-height: calc(100vh - 100px);
  margin: 50px;
  background: silver;
}

<div class="container">Hello world.</div>

3. Pleine hauteur avec border

body {
  margin: 0;
}
.container {
  min-height: 100vh;
  border: 50px solid pink;
  box-sizing: border-box;
  background: silver;
}

<div class="container">Hello world.</div>

une autre solution est d'utiliser display:table qui a un comportement de modèle de boîte différent.

vous pouvez définir une hauteur et une largeur au parent et ajouter du rembourrage sans l'étendre. L'enfant a 100% de hauteur et de largeur moins les rembourrages.

JSBIN

une autre option serait d'utiliser le propperty de dimensionnement par boîte. Le seul problème avec les deux serait qu'ils ne travaillent pas dans IE7.

une autre solution: vous pouvez utiliser des unités de pourcentage pour les marges aussi bien que pour les tailles. Par exemple:

.fullWidthPlusMargin {
    width: 98%;
    margin: 1%;
}

la principale question ici est que les marges augmenteront/diminueront légèrement avec la taille de l'élément parent. Vraisemblablement, la fonctionnalité que vous préféreriez est que les marges restent constantes et l'élément enfant se développe/rétrécit pour combler les changements dans l'espacement. Ainsi, en fonction de comment serré vous avez besoin de votre affichage, qui pourrait être problématique. (J'avais aussi aller pour une petite marge de 0,3%).

L'exemple de Frank m'a un peu embrouillé - il n'a pas fonctionné dans mon cas parce que je ne comprenais pas encore très bien le positionnement. Il est important de noter que l'élément conteneur parent doit avoir une position non statique (il l'a mentionné mais je l'ai négligé, et ce n'était pas dans son exemple).

voici un exemple où l'enfant - un rembourrage et une bordure - utilise un positionnement absolu pour remplir le parent à 100%. Le parent utilise le positionnement relatif afin de fournir une point de référence pour la position de l'enfant tout en restant dans le flux normal - l'élément suivant "more-content" n'est pas affecté:

#box {
    position: relative;
    height: 300px;
    width: 600px;
}

#box p {
    position: absolute;
    border-style: dashed;
    padding: 1em;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

<div id="box">
  <p>100% height and width!</p>
</div>
<div id="more-content">
</div>

utile lien pour rapidement l'apprentissage de positionnement CSS

c'est 2018 maintenant, la nouvelle merde chaude devrait être mentionnée ici que la question continue à surgir sur Google.

Une solution flexbox (travail sur IE11): ( ou de la vue sur jsfiddle )

<html>
  <style>
    html, body {
      height: 100%; /* fix for IE11, not needed for chrome/ff */
      margin: 0; /* CSS-reset for chrome */
    }
  </style>
  <body style="display: flex;">
    <div style="background-color: black; flex: 1; margin: 25px;"></div>
  </body>
</html>

(le CSS-reset n'est pas nécessairement important pour le problème réel.)

la partie importante est flex: 1 (en combinaison avec display: flex à parent.) Assez curieusement, l'explication la plus plausible que je connaisse du fonctionnement de la propriété Flex provient d'une documentation react-native, donc je m'y réfère quand même .

Bordure autour de div, plutôt que la page du corps de la marge

une autre solution - je voulais juste une bordure simple autour du bord de ma page, et je voulais une hauteur de 100% quand le contenu était plus petit que cela.

Border-box n'a pas fonctionné, et le positionnement fixe a semblé erroné pour un besoin aussi simple.

j'ai fini par ajouter une bordure à mon conteneur, au lieu de compter sur la marge du corps de la page - il ressemble à ceci :

body, html {
    height: 100%;
    margin: 0;
}

.container {
    width: 100%;
    min-height: 100%;
    border: 8px solid #564333;
}

  <style type="text/css">
.stretchedToMargin {
    position:absolute;
    width:100%;
    height:100%;

}
</style>