web-dev-qa-db-fra.com

Comment obtenir un wrapper <div> pour remplir 100% de la hauteur d'un navigateur, quelle que soit la hauteur du contenu inclus?

Cette question semble avoir été répondue un million de fois sous différentes formes, mais je ne trouve toujours pas de réponse qui fonctionne pour moi. En termes simples, j'ai cette mise en page:

<body>
    <div class="wrapper">
        <div class="header"></div>
        <div class="body"></div>
        <div class="footer"></div>
    </div>
</body>

Je veux que wrapper soit centré horizontalement dans le navigateur et que celui-ci remplisse 100% de la hauteur de celui-ci. Chacun des éléments <div> inclus a une hauteur fixe qui correspond le plus souvent à une hauteur supérieure à la hauteur de la fenêtre du navigateur. Si tel est le cas, je reçois la mise en page que je veux.

Si, toutefois, la hauteur de la fenêtre du navigateur est supérieure à la hauteur combinée des éléments <div> inclus (comme dans le cas d'une orientation iMac ou iPhone portrait, par exemple), la variable wrapper semble s'arrêter à la fin de la variable footer et reste de la fenêtre ci-dessous, c'est <body> fond. L'arrière-plan wrapper et l'arrière-plan <body> sont de couleurs différentes, il est donc évident que c'est le cas.

Quelqu'un at-il une solution CSS à ce sujet, de sorte que la variable wrapper remplisse la hauteur du navigateur, que cette hauteur soit supérieure ou inférieure à la hauteur combinée du contenu?

EDIT: REPONSE:

La réponse était une combinaison des réponses ci-dessous et de quelque chose qui m’arrivait tout à l’heure: Dans le CSS, procédez comme suit:

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

.wrapper {
    height:     auto;       /* These two lines were the key. */
    min-height: 100%
    /*overflow:   hidden;*/ /* Do not use this, it crops in small browsers. */
    margin:     0px auto;
    padding:    0px auto;
 }
csshtmlheight
10
Ed King

Si vous souhaitez définir une hauteur de div sur 100%, vous devez également définir la hauteur du code HTML et du corps sur 100%. Ensuite, vous pouvez ajouter 100% à la div.

CSS

.wrapper {
border: 1px solid red;
height: 100%;
margin: 0px auto;
overflow: hidden;
}

body, html {
height: 100%;
}

Jetez un oeil à ce jfiddle .

12
Benjamin Todts

Si vous voulez avoir un élément qui remplit 100% de la hauteur de la fenêtre, vous devez avoir:

body, html {
  height: 100%;
}

#wrapper {
  height: 100%;
}
1
António Regadas

pour centrer l'emballage div

body{
   margin:0px;
   padding:0px;
  height:100%;
}
.wraper{
   width:90%;
   margin:0px auto;
  height:100%;
  overflow:hidden
}
0
Love Trivedi