Faire des DIV hauteur au moins aussi grande que la page en CSS

J'ai un DIV que je veux toucher le bas de l'écran (pour l'apparence des raisons). Parfois, le contenu est assez grand pour le faire, mais parfois le contenu est trop court et le DIV ne touche pas le bas de l'écran. Est-il une solution simple?

InformationsquelleAutor Tower | 2010-03-02
  1. 23

    Si vous définissez min-hauteur de 100% pour la DIV, vous devez également inclure:

    body, html {
   height:100%
}

    Éléments d'élargir la taille de leur conteneur, donc assurez-vous que le conteneur (la page elle-même) a une hauteur de 100% aussi.

    • Fonctionne presque. Le DIV avec min-height: 100%; fonctionne comme prévu, mais comment puis-je faire des Divisions à l'intérieur de la hauteur: 100%?
    • Merci de poster un simple exemple de code HTML.
    • Je réalise que c'est un très vieux post, mais pour l'instant cela ne fonctionne pas pour moi. La solution suivante ci-dessous (avec 'vh') n'a, cependant.
    InformationsquelleAutor Diodeus - James MacFarlane
  2. 9

    Pour tous ceux qui lisent ce sujet plus tard (comme moi) vous pouvez utiliser 

    min-height: 100vh;

    La vh l'unité est pour la fenêtre d'affichage de la hauteur et est d'un pour cent de la taille de l'écran.

    • Beaucoup plus simple et utile. Merci beaucoup!
    InformationsquelleAutor SilentVoid
  3. 7

    C'est la façon de le faire: http://ryanfait.com/sticky-footer/

    InformationsquelleAutor Tom
  4. 4

    min-height:100%

    devrait fonctionner en supposant qu'il n'est pas dans un autre div avec une hauteur définie,

    • même vieux, même vieux: "ne fonctionnent pas dans IE6"
    • bon, si plus de gens ignoré ie6, peut-être que les gens cessent de l'utiliser 🙂
    • Cela fonctionne dans certains navigateurs, mais le corps et le html sont des éléments de contenu de la hauteur, à moins d'indication contraire dans certaines communes broswers.
    • Je ne peux pas obtenir que cela fonctionne? Êtes-vous sûr qu'il fonctionne? J'ai essayé Opera 10.50, Firefox 3.6, Chrome 4 et n'a pas de travail.
    • Essayez de définir body, html { height:100%; } aussi, conformément à la réponse ci-dessous/ci-dessus, selon l'endroit où il apparaît. 🙂
    InformationsquelleAutor Jimmeh
  5. 3

    IE6 correctif pour aller avec Jimmeh réponse:

    height: expression( this.scrollHeight < document.body.clientHeight ? "100%" : "auto" )
    • Je pense que height: 100% est assez IE6 va activez le réglage automatique de la hauteur si pas caché débordement (ou elle décide qu'en raison de quelque obscure raison, la hauteur doit être autre chose)
    InformationsquelleAutor peirix
  6. 1

    Si vous définissez la div CSS position:absolute, vous pouvez utiliser:

    .yourDiv {
  top: 0
  bottom: 0

}
    • Cela ne fonctionnera que si le div n'est pas placé à l'intérieur d'un autre élément à la position (pas d'affichage). Et si c'est le cas, le html et les éléments du corps doit être réglé sur 100% de la hauteur.
    • Vrai. J'ai été en supposant que (peut-être à tort) que cela allait être le principal div conteneur. Sinon, pourquoi faire étirement du haut vers le bas?
    • Je n'ai pas l'étirer de haut en bas, mais à partir de y à fond, là où y est une position en fonction de la partie supérieure des éléments DIV (menu et en-tête).
    InformationsquelleAutor Robusto