web-dev-qa-db-fra.com

Sections HTML 100% hauteur de la fenêtre

J'essaie de construire un site Web d'une page avec des sections (5). J'essaie de faire de chaque section 100% de largeur et de hauteur de la fenêtre. Ainsi, même si la fenêtre est redimensionnée, la taille de la section s'y adapte.

J'ai entendu parler de JavaScript mais je n'ai trouvé aucune bonne solution. Quelqu'un peut-il m'aider? Est-ce possible avec des requêtes médias?

javascripthtmlcsswebmedia-queries
30
Nicolas Wilhem

NB: vh ne fonctionne que pour les ordinateurs portables et les écrans de plus grande taille car pour les écrans mobiles plus petits, le vh prend également en compte la fenêtre du navigateur qui affiche le site Web et les éléments tels que le volume, la batterie, etc. au-dessus de la fenêtre du navigateur.

Cela peut être fait uniquement en CSS, aucun Javascript n'est requis.

La bonne façon est d'utiliser les unités vh et vw :

vh: 1/100e de la hauteur de la fenêtre.

vw: 1/100ème de la largeur de la fenêtre.

En tant que tel, en donnant à l'élément que vous souhaitez être 100% aussi haut que la fenêtre d'affichage un paramètre de hauteur de 100vh vous donnera ce que vous recherchez.

html,
body {
  height: 100%;
  margin: 0;
}
section {
  height: 100vh;
}
section:nth-child(1) {
  background: lightblue;
}
section:nth-child(2) {
  background: lightgreen;
}
section:nth-child(3) {
  background: purple;
}
section:nth-child(4) {
  background: red;
}
section:nth-child(5) {
  background: yellow;
}
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>

Alternativement , vous devrez définir les dimensions de l'élément par rapport aux éléments parents html et body, qui devra avoir une hauteur de 100%:

html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
}
section {
  height: 100%;
  width: 100%;
}
section:nth-child(1) {
  background: lightblue;
}
section:nth-child(2) {
  background: lightgreen;
}
section:nth-child(3) {
  background: purple;
}
section:nth-child(4) {
  background: red;
}
section:nth-child(5) {
  background: yellow;
}
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
52
SW4