Quelle est la meilleure façon de faire en sorte qu'un élément d'une hauteur minimale de 100 % traverse une zone de texte ? large éventail de navigateurs ?
En particulier, si vous avez une mise en page avec un header y footer de fixe height ,
comment faire pour que la partie centrale du contenu se remplisse 100% de l'espace intermédiaire avec le footer fixé au fond ?
Vous pouvez essayer ceci : http://www.monkey-business.biz/88/horizontal-zentriertes-100-hohe-css-layout/ C'est une hauteur de 100% et un centre horizontal.
Comme indiqué dans la réponse d'Afshin Mehrabani, vous devez définir la hauteur de body et html à 100%, mais pour que le pied de page soit présent, calculez la hauteur du wrapper :
#pagewrapper{
/* Firefox */
height: -moz-calc(100% - 100px); /*assume i.e. your header above the wrapper is 80 and the footer bellow is 20*/
/* WebKit */
height: -webkit-calc(100% - 100px);
/* Opera */
height: -o-calc(100% - 100px);
/* Standard */
height: calc(100% - 100px);
}
Comme spécifié la propriété height dans les docs MDN il n'est pas hérité. Vous devez donc le définir à 100%. Comme il est connu que toute page web commence par html puis body comme enfant, vous devez définir hauteur : 100%. dans les deux cas.
html,
body {
height: 100%;
}
<html>
<body>
</body>
</html>Et tout enfant marqué avec une hauteur de 100% sera la portion de 100 de la hauteur du parent. Dans l'exemple de style ci-dessus, nous définissons la balise html comme étant à 100%, elle sera à la hauteur totale de l'écran disponible. Ensuite, le corps est à 100%, et donc il sera également à la hauteur totale, puisque son parent est html.
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
32 votes
Vous pourriez envisager
min-height: 100vh;. La hauteur est ainsi égale ou supérieure à la taille de l'écran,vh: vertical height. Pour plus d'informations : w3schools.com/cssref/css_units.asp .2 votes
Juste une précision,
vhsignifieviewport heightet donc vous pouvez également utiliservwpourviewport widthyvminpour la dimension la plus petite,viewport minimum.1 votes
Cette solution donnera des résultats indésirables sur chrome pour Android (il faudrait vérifier sur d'autres navigateurs mobiles comme Safari) car 100vh ne sera pas la même chose que 100%. En effet, la hauteur 100% correspond à la hauteur de l'écran moins la barre d'adresse en haut de l'écran, alors que 100vh correspond à la hauteur de l'écran sans la barre d'adresse. L'utilisation de 100vh ne fonctionnera donc pas sur chrome pour Android. Votre pied de page se trouvera sous le pli d'une hauteur correspondant à la hauteur de la barre d'adresse du navigateur.
0 votes
Vous pouvez y parvenir avec Flexbox. Voir exemple .
1 votes
Aujourd'hui, "100vh" fonctionne comme un charme.