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 ?
Je suis d'accord avec Levik, car le conteneur parent est défini à 100%. Si vous avez des barres latérales et que vous voulez qu'elles remplissent l'espace pour rejoindre le pied de page, vous ne pouvez pas les définir à 100% car elles seront également à 100% de la hauteur du parent, ce qui signifie que le pied de page sera poussé vers le bas lorsque vous utiliserez la fonction d'effacement.
Pensez-y de la manière suivante : si votre en-tête a une hauteur de 50px et votre pied de page une hauteur de 50px et que le contenu s'adapte automatiquement à l'espace restant, par exemple 100px, et que le conteneur de la page représente 100 % de cette valeur, sa hauteur sera de 200px. Lorsque vous définissez la hauteur de la barre latérale à 100 %, elle est alors de 200px, alors qu'elle est censée s'insérer parfaitement entre l'en-tête et le pied de page. Au lieu de cela, elle fait 50px + 200px + 50px, ce qui fait que la page fait maintenant 300px parce que les barres latérales sont fixées à la même hauteur que le conteneur de la page. Il y aura un grand espace blanc dans le contenu de la page.
J'utilise Internet Explorer 9 et voici ce que j'obtiens comme effet en utilisant cette méthode à 100%. Je n'ai pas essayé avec d'autres navigateurs et je suppose que cela peut fonctionner avec certaines des autres options, mais ce ne sera pas universel.
Vous devez d'abord créer un div avec id='footer' après votre content puis faites simplement ceci.
Votre HTML devrait ressembler à ceci :
<html>
<body>
<div id="content">
...
</div>
<div id="footer"></div>
</body>
</html>Et le CSS :
html, body {
height: 100%;
}
#content {
height: 100%;
}
#footer {
clear: both;
}
Ce petit morceau de CSS fait "the middle content part fill 100% of the space in between with the footer fixed to the bottom" :
html, body { height: 100%; }
your_container { min-height: calc(100% - height_of_your_footer); }la seule exigence est que vous devez avoir un pied de page de hauteur fixe.
Par exemple pour cette mise en page :
<html><head></head><body>
<main> your main content </main>
</footer> your footer content </footer>
</body></html>vous avez besoin de ce CSS :
html, body { height: 100%; }
main { min-height: calc(100% - 2em); }
footer { height: 2em; } 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.