CSS 100% hauteur avec padding/margin

Question

CSS 100% hauteur avec padding/margin

Demandé el 27 de Janvier, 2009: Quand la question a-t-elle été
161012 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Avec HTML/CSS, comment puis-je créer un élément dont la largeur et/ou la hauteur est égale à 100 % de celle de l'élément parent tout en conservant un remplissage ou des marges appropriés ?

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

Maintenant, je sais que ce n'est pas la façon dont le modèle standard de boîte spécifie que cela devrait fonctionner (bien que j'aimerais savoir pourquoi, exactement...), donc la réponse évidente ne fonctionne pas :

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

Mais il me semble qu'il doit y avoir UN moyen de produire cet effet de manière fiable pour un parent de taille arbitraire. Quelqu'un connaît-il un moyen d'accomplir cette tâche (apparemment simple) ?

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

EDIT : Puisqu'on a demandé un exemple, voici le plus simple qui me vient à l'esprit :

<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 en sorte que la boîte noire s'affiche avec une marge de 25 pixels sur tous les bords sans que la page devienne suffisamment grande pour nécessiter des barres de défilement.

Demandé el 27 de Janvier, 2009 par Toji

0 votes

J'ai constaté que ces deux solutions sont les plus fiables : http://www.xs4all.nl/~peterned/examples/csslayout1.html http://themaninblue.com/experiment/footerStickAlt/ Avez-vous un HTML spécifique que nous pouvons voir et avec lequel nous pouvons jouer ?

Commenté el 28 de Janvier, 2009 par Nick Presta

0 votes

stackoverflow.com/questions/3931187/

Commenté el 13 de Avril, 2012 par Steve

Answer 1

5 Réponses

Answer 2

778voto

Frank Schwieterman Points 13519

J'ai appris à faire ce genre de choses en lisant " PRO HTML et CSS Design Patterns ". Le site display:block est la valeur d'affichage par défaut de la div mais j'aime le rendre explicite. Le conteneur doit être du bon type ; position L'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

Répondu el 27 de Janvier, 2009 par Frank Schwieterman (13519 Points )

0 votes

Wow... cela fait beaucoup de CSS à parcourir mais cela semble fonctionner ! C'est peut-être ce que je cherchais. Laissez-moi m'amuser avec quelques scénarios supplémentaires avant de marquer cette proposition comme acceptée.

Commenté el 28 de Janvier, 2009 par Toji

0 votes

Si vous avez d'autres questions, comme par exemple comment le faire fonctionner dans un contexte particulier, faites-le moi savoir. Notez que les éléments connexes horizontaux et les éléments connexes verticaux peuvent être utilisés indépendamment, pour autant que l'affichage soit de type bloc et que la position soit fixe, absolue ou relative.

Commenté el 28 de Janvier, 2009 par Frank Schwieterman

0 votes

Je viens de l'essayer dans le contexte où je vais l'utiliser et ça marche comme sur des roulettes. Je suis toujours étonné qu'il faille autant de code pour faire quelque chose qui ne devrait tenir que sur deux lignes, mais si ça marche, je suis preneur ! Merci !

Commenté el 28 de Janvier, 2009 par Toji

Afficher 15 autres commentaires

Answer 3

421voto

Marco Jardim Points 1951

Il existe un nouvelle propriété en CSS3 que vous pouvez utiliser pour modifier la façon dont le modèle de boîte calcule la largeur et la hauteur, c'est ce qu'on appelle le dimensionnement des boîtes.

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

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's IE7.js ajoute un support pour celui-ci. Profitez-en :)

Répondu el 14 de Juin, 2010 par Marco Jardim (1951 Points )

50 votes

Enfin ! J'attends cette fonctionnalité depuis environ 10 ans maintenant. Dommage qu'IE7 ne la supporte pas mais je pense toujours que les gens qui utilisent encore IE ne méritent pas une belle mise en page.

Commenté el 16 de Janvier, 2012 par cronoklee

2 votes

Cela a fonctionné sur iPhone/Safari et le navigateur par défaut d'Android pour moi alors que la solution absolument positionnée ci-dessus n'a pas fonctionné.

Commenté el 26 de Mars, 2012 par Spud

18 votes

C'est en fait la même chose que Modèle de boîte de mode des bizarreries d'IE . Je trouve ça amusant que tout le monde déteste IE, et pourtant maintenant border-box est le héros de tous :)

Commenté el 13 de Avril, 2012 par Matt Greer

Afficher 6 autres commentaires

Answer 4

69voto

amolk Points 767

La solution est de ne PAS utiliser du tout la hauteur et la largeur ! Attachez la boîte intérieure en utilisant top, left, right, bottom et ajoutez ensuite 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>

Répondu el 9 de Avril, 2010 par amolk (767 Points )

6 votes

Un vote plus élevé parce que vous avez techniquement raison, mais c'est aussi fondamentalement la même réponse que celle de Frank (qui, je pense, est un peu plus conviviale pour les navigateurs plus négligés).

Commenté el 10 de Avril, 2010 par Toji

Answer 5

43voto

Brian Aderer Points 131

Le meilleur moyen est d'utiliser la propriété calc(). Votre cas ressemblerait donc à ceci :

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

Simple, propre, sans contournement. Veillez simplement à ne pas oublier l'espace entre les valeurs et l'opérateur (ex. (100%-5px) qui brisera la syntaxe. Bonne lecture !

Répondu el 15 de Juin, 2013 par Brian Aderer (131 Points )

6 votes

Bonne solution. N'oubliez pas de vérifier le support du navigateur : Puis-je utiliser calc()

Commenté el 17 de Juin, 2013 par Brett Postin

7 votes

Cela ne donnerait-il pas en fait une largeur et une hauteur de 100 % chacune PLUS un remplissage de 5px, puisque le remplissage rendrait effectivement l'élément 10px plus large et plus grand, respectivement ?

Commenté el 1 de Novembre, 2014 par Utilisateur non enregistré

0 votes

Enfin une bonne solution, et pas comme le reste d'entre eux là vous pot le haut, droite, bas et gauche pour être 0, qui fonctionnera seulement avec position : absolute ;

Commenté el 20 de Janvier, 2018 par Gil Epshtain

Afficher 1 autres commentaires

Answer 6

20voto

Alex Points 6968

Selon la spécification w3c, la hauteur fait référence à la hauteur de la zone visible. Par exemple, sur un écran d'une résolution de 1280x1024 pixels, la hauteur est de 100% = 1024 pixels.

min-height fait référence à la hauteur totale de la page, y compris le contenu. Ainsi, sur une page dont le contenu est supérieur à 1024px, min-height:100% sera étiré pour inclure tout le contenu.

L'autre problème est que le padding et la bordure sont ajoutés à la hauteur et à la largeur dans la plupart des navigateurs modernes, à l'exception de ie6 (ie6 est en fait assez logique mais ne se conforme pas à la spécification). C'est ce qu'on appelle le modèle de boîte. Ainsi, si vous spécifiez

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

Il vous donnera en fait 100% + 5px + 5px pour la hauteur. Pour contourner ce problème, vous avez besoin d'un conteneur enveloppant.

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

Répondu el 27 de Janvier, 2009 par Alex (6968 Points )

4 votes

@Alex : Mais qu'est-ce qui fait que la div intérieure (celle qui est rembourrée) a 100% de la hauteur de la div extérieure. D'après mon expérience, on obtient simplement une petite div courte à l'intérieur d'une grande div pleine hauteur.

Commenté el 28 de Janvier, 2009 par Lawrence Dol

CSS 100% hauteur avec padding/margin

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

CSS 100% hauteur avec padding/margin

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: