Question CSS 100% de hauteur avec rembourrage / marge


Cela me rend folle depuis quelques jours maintenant, mais en réalité, c'est un problème que je rencontre depuis quelques années: Avec HTML / CSS, comment puis-je faire un élément qui a une largeur et / ou hauteur qui est 100% de son élément parent et a toujours un bon remplissage ou des marges?

Par "correct", je veux dire que si mon élément parent est 200px grand et je spécifie height = 100% avec padding = 5px Je m'attendrais à ce que je devrais obtenir un 190px élément élevé avec border = 5px de tous les côtés, bien centré dans l'élément parent.

Maintenant, je sais que ce n'est pas comme ça que le modèle de boîte standard devrait fonctionner (bien que j'aimerais savoir pourquoi, exactement ...), donc la réponse évidente ne marche pas:

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

Mais il me semble qu'il doit y avoir QUELQUE façon de produire de façon fiable cet effet pour un parent de taille arbitraire. Est-ce que quelqu'un sait d'une manière d'accomplir cette tâche (apparemment simple)?

Oh, et pour mémoire, je ne suis pas très intéressé par la compatibilité IE, ce qui devrait (espérons-le) rendre les choses un peu plus faciles.

MODIFIER: Puisqu'un exemple a été demandé, voici le plus simple que je puisse penser:

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

Le défi consiste alors à faire apparaître la boîte noire avec un remplissage de 25 pixels sur tous les bords sans que la page ne devienne suffisamment grande pour nécessiter des barres de défilement.


724
2018-01-27 23:28


origine


Réponses:


J'ai appris à faire ce genre de choses en lisant "Modèles de conception PRO HTML et CSS". Le display:block est la valeur d'affichage par défaut pour div, mais j'aime le rendre explicite. Le conteneur doit être le bon type; position attribut est fixed, relative, ou 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;
}
<div class="stretchedToMargin">
  Hello, world
</div>

Violon par Nooshu commentaire


694
2018-01-27 23:53



Il y a un 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, cela s'appelle le dimensionnement de la boîte.

En définissant cette propriété avec la valeur "border-box", l'élément que vous lui appliquez ne s'étire pas lorsque vous ajoutez un remplissage ou une bordure. Si vous définissez quelque chose avec une largeur de 100 pixels et un remplissage de 10 pixels, la largeur sera toujours de 100 pixels.

box-sizing: border-box;

Voir ici pour le support du navigateur. Il ne fonctionne pas pour IE7 et inférieur, cependant, je crois que Dean Edward IE7.js ajoute un soutien pour cela. Prendre plaisir :)


326
2018-06-14 14:10



La solution est de ne pas utiliser la hauteur et la largeur du tout! Fixez la boîte intérieure en haut, à gauche, à droite et en bas, puis ajoutez une 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>


62
2018-04-09 20:03



Le meilleur moyen est avec la propriété calc (). Donc, votre cas ressemblerait à:

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

Simple, propre, pas de solutions de contournement. Assurez-vous de ne pas oublier l'espace entre les valeurs et l'opérateur (par exemple (100% -5px) qui va casser la syntaxe.


35
2018-06-15 17:34



En fonction de la hauteur de 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% de hauteur = 1024 pixels.

min-height se réfère à la hauteur totale de la page, y compris le contenu de sorte que sur une page où le contenu est supérieur à 1024px min-height: 100% s'étendra pour inclure tout le contenu.

L'autre problème est que le remplissage et la bordure sont ajoutés à la hauteur et à la largeur dans la plupart des navigateurs modernes sauf IE6 (ie6 est en fait assez logique mais ne correspond pas à la spécification). C'est ce qu'on appelle 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>

20
2018-01-27 23:45



C'est l'une des idioties pure et simple de CSS - Je n'ai pas encore compris le raisonnement (si quelqu'un sait, s'il vous plaît expliquer).

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

Notez également que la définition de la hauteur est notoirement incohérente entre les navigateurs.


Une autre chose que j'ai apprise depuis que j'ai posté ceci est que le pourcentage est relatif du conteneur longueurc'est-à-dire, sa largeur, rendant un pourcentage encore plus inutile pour la taille.

De nos jours, les unités viewport vh et vw sont plus utiles, mais ne sont pas particulièrement utiles pour autre chose que les conteneurs de niveau supérieur.


7
2018-01-27 23:33



Une autre solution consiste à 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 un remplissage sans l'étendre. L'enfant a 100% de hauteur et de largeur moins les rembourrages.

JSBIN

Une autre option serait d'utiliser la propriété de taille de boîte. Seul problème avec les deux serait qu'ils ne travaillent pas dans IE7.


5
2017-11-30 14:35