Force divs imbriqués pour avoir min-hauteur de 100%?

Je sais que min-height: 100% ne fonctionnera que pour prendre un minimum de 100% de son élément parent de la hauteur si le parent de l'élément a une valeur numérique pour la hauteur, mais si j'ai un peu de divs imbriqués et je les veux toutes pour avoir un min-height de 100%? J'ai essayé min-height:inherit mais cela ne fonctionne pas non plus? Je sais que je peux probablement résoudre ce problème avec JavaScript simple vérification du navigateur hauteur de la valeur sur le document de la charge et en l'affectant que le min-height de la propriété de mes divs imbriqués, mais j'aimerais savoir si il serait possible de résoudre cela avec seulement css?

Modifier: je dois aussi mentionner que j'ai besoin de mon la plus externe de la div et de mes divs imbriqués pour avoir un min-height de 100%, de sorte qu'ils prennent au moins à la hauteur du navigateur, mais étendre si nécessaire.

OriginalL'auteur hesson | 2012-08-11

  1. 20

    min-height: inherit; devrait fonctionner: http://jsfiddle.net/ugxbs/

    MODIFIER

    Comme pour le pourcentage de valeurs et le comportement attendu, il n'y a aucune logique derrière imbriquée min-height. Ce que vous devez faire est d'utiliser le height de propriété pour tous les parents, puis ajouter min-hauteur à l'intérieur de la plupart des DIV.

    F. ex:

    <html>
    <body>
        <div class="outer">
            <div class="inner"></div>
        </div>
    </body>
</html>

    CSS:

    html, body, .outer { height: 100% }
.inner { min-height: 100%; }

    http://jsfiddle.net/4PsdT/

    De cette façon, vous indiquez le navigateur pour définir tous les éléments externes à partir du haut (HTML) à une hauteur de 100%. Cela permettra de rendre ces éléments s'étendent à travers le navigateur de hauteur. Puis il suffit d'ajouter un min-height à l'intérieur de la plupart de l'élément qui contient le contenu.

    Définition d'un height ne veut pas dire que ce sont les enfants de l'excessive de contenu va tomber, sauf si vous les ajoutez overflow:hidden;.

    Je sais que cela fonctionnerait quand plus à l'extérieur div a une valeur numérique pour le min-height, mais ce sera un échec lors de la plus à l'extérieur div a un pourcentage de min-height (ce dont j'ai besoin dans mon cas). J'ai besoin de tous mes div imbriqués afin de tenir jusqu'à la hauteur de la fenêtre du navigateur au moins, c'est mon plus externe div doit avoir un min-height de 100%, à moins qu'il y a une autre façon d'aborder ce problème.
    Voir mon edit pour tenter d'expliquer pourquoi imbriquée min-height n'est pas une logique d'approche du problème.
    Parfait, c'est juste ce dont j'avais besoin!
    En fait, le réglage de l'extérieur de la hauteur à 100%, il est des enfants excessive de contenu à l'échec. Au moins, si il y extérieure est un frère de l'après cela, il sera couvert par l'intérieur du contenu. jsfiddle.net/uL34X/1

    OriginalL'auteur David Hellsing

  2. 0

    Je peux le faire fonctionner avec la propriété de la hauteur mais pas de min-height.

    http://jsfiddle.net/zDVqm/

    OriginalL'auteur LeBen