Un enfant dans un parent avec une hauteur minimale de 100% n'hérite pas de la hauteur.

Question

Un enfant dans un parent avec une hauteur minimale de 100% n'hérite pas de la hauteur.

Demandé el 11 de Décembre, 2011: Quand la question a-t-elle été
138023 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'ai trouvé un moyen de faire en sorte qu'un conteneur div occupe au moins toute la hauteur d'une page, en définissant les paramètres suivants min-height: 100%; . Toutefois, lorsque j'ajoute un div imbriqué et que je définis le paramètre height: 100%; il ne s'étire pas à la hauteur du conteneur. Existe-t-il un moyen de le corriger ?

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

#containment {
  min-height: 100%;
  background: pink;
}

#containment-shadow-left {
  height: 100%;
  background: aqua;
}

<div id="containment">
  <div id="containment-shadow-left">
    Hello World!
  </div>
</div>

Demandé el 11 de Décembre, 2011 par lamefun

Answer 1

5 Réponses

Answer 2

10voto

Jeremy Hewett Points 103

La solution de Kushagra Gour fonctionne (du moins dans Chrome et IE) et résout le problème original sans avoir à utiliser display: table; y display: table-cell; . Voir plunker : http://plnkr.co/edit/ULEgY1FDCsk8yiRTfOWU

Réglage de min-height: 100%; height: 1px; sur la div extérieure fait en sorte que sa hauteur réelle soit d'au moins 100 %, comme il se doit. Cela permet également à la division intérieure d'hériter correctement de la hauteur.

Répondu el 30 de Juin, 2014 par Jeremy Hewett (103 Points )

Answer 3

7voto

Pangloss Points 19560

En plus des réponses existantes, il existe également des unités de visualisation. vh à utiliser. Un extrait simple est présenté ci-dessous. Bien sûr, il peut être utilisé avec calc() également, par exemple min-height: calc(100vh - 200px); lorsque l'en-tête et le pied de page ont 200px hauteur ensemble.

body {
  margin: 0;
}

.child {
  min-height: 100vh;
  background: pink;
}

<div class="parent">
  <div class="child"></div>
</div>

Répondu el 11 de Février, 2018 par Pangloss (19560 Points )

Answer 4

6voto

zyrup Points 507

Cela fonctionne généralement pour moi :

.parent {
  min-height: 100px;
  background-color: green;
  display: flex;
}
.child {
  height: inherit;
  width: 100%;
  background-color: red;
}

<!DOCTYPE html>
<html>
  <body>
    <div class="parent">
      <div class="child">
      </div>
    </div>
  </body>
</html>

Répondu el 19 de Janvier, 2020 par zyrup (507 Points )

Answer 5

5voto

Mike Hopkins Points 303

Je ne pense pas qu'il s'agisse d'un bug des navigateurs. Tous se comportent de la même manière - c'est-à-dire qu'une fois que vous avez cessé de spécifier des hauteurs explicites, la hauteur minimale est essentiellement une "dernière étape".

Il semble que ce soit exactement comme le suggère la spécification CSS 2.1 : http://www.w3.org/TR/CSS2/visudet.html#the-height-property

Le pourcentage est calculé par rapport à la hauteur du bloc contenant la boîte générée. Si la hauteur du bloc contenant n'est pas spécifiée explicitement (c'est-à-dire qu'elle dépend de la hauteur du contenu) et que cet élément n'est pas positionné de manière absolue, la valeur est égale à "auto".

Par conséquent, comme le min-height Le parent ne dispose pas d'une height définie, la valeur par défaut est auto.

Il existe quelques moyens de contourner ce problème, notamment en utilisant display: table-cell ou des styles plus récents comme le flexbox, si cela est possible pour les navigateurs de votre public cible. Vous pouvez également contourner cette règle dans certaines situations en utilisant l'attribut top y bottom sur un élément interne absolument positionné, ce qui vous donne une hauteur de 100 % sans le spécifier.

Répondu el 21 de Novembre, 2014 par Mike Hopkins (303 Points )

Answer 6

1voto

Jonas Stensved Points 2803

Pour les googleurs :

Cette solution de contournement jquery fait en sorte que #containment obtienne une hauteur automatiquement (by, height : auto), puis se voit attribuer la hauteur réelle en tant que valeur de pixel.

<script type="text/javascript">
<!--
    $(function () {

        // workaround for webkit-bug http://stackoverflow.com/a/8468131/348841

        var rz = function () {
            $('#containment')
            .css('height', 'auto')
            .css('height', $('#containment').height() + 'px');
        };

        $(window).resize(function () {
            rz();
        });

        rz();

    })
-->
</script>

Répondu el 16 de Décembre, 2011 par Jonas Stensved (2803 Points )

Un enfant dans un parent avec une hauteur minimale de 100% n'hérite pas de la hauteur.

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Un enfant dans un parent avec une hauteur minimale de 100% n'hérite pas de la hauteur.

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: