Comment faire en sorte qu'une div occupe 100% de la hauteur de la fenêtre du navigateur ?

Introduction aux longueurs en pourcentage de la fenêtre d'affichage

CSS3 a introduit les longueurs en pourcentage de la fenêtre d'affichage, qui sont des unités relatives à la taille de la fenêtre. L'unité de hauteur de la fenêtre (vh) aide à créer des éléments à hauteur complète. Un vh équivaut à 1% de la hauteur de la fenêtre, donc 100vh représente la hauteur totale de la fenêtre du navigateur.

Contrairement aux valeurs en pourcentage, les unités vh sont basées sur la taille de la fenêtre, et non sur l'élément parent. Cela les rend fiables pour créer des mises en page à hauteur complète sur différents appareils et tailles d'écran.

Mise en œuvre de 100vh pour des divs à hauteur complète

Pour créer une div à hauteur complète en utilisant les unités de fenêtre, utilisez ce CSS :

.full-height {
  height: 100vh;
}

Ce code fait que la div s'étend sur toute la hauteur de la fenêtre du navigateur, quelle que soit sa position dans le document.

Les unités de fenêtre offrent des avantages pour le design responsive :

• La hauteur de la div change lorsque la fenêtre du navigateur est redimensionnée.
• Cela fonctionne sur divers appareils et tailles d'écran.
• Aucun calcul complexe ou JavaScript n'est nécessaire pour les mises en page à hauteur complète.

Utilisation de JavaScript pour l'ajustement dynamique de la hauteur

JavaScript offre une autre façon d'ajuster dynamiquement la hauteur d'un div. Cette méthode mesure la hauteur de la fenêtre et définit la hauteur du div en conséquence. Voici un exemple :

function setDivHeight() {
  var windowHeight = window.innerHeight;
  document.getElementById('myDiv').style.height = windowHeight + 'px';
}

window.addEventListener('resize', setDivHeight);
setDivHeight();

Cette approche présente certains avantages :

• Elle fonctionne dans les anciens navigateurs qui ne prennent pas en charge les unités de viewport.
• Elle permet des calculs plus complexes si nécessaire.

Cependant, elle comporte aussi quelques inconvénients :

• Elle nécessite que JavaScript soit activé.
• Elle peut provoquer des changements de mise en page si JavaScript se charge lentement.
• Elle demande plus de code à maintenir par rapport à la solution CSS.

function debounce(func, wait) {
  let timeout;
  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(func, wait);
  };
}

window.addEventListener('resize', debounce(setDivHeight, 250));

Mise en page Flexbox pour des colonnes pleine hauteur

Flexbox est un modèle de mise en page CSS qui peut résoudre le problème de la pleine hauteur. Il offre un moyen de créer des éléments conteneurs flexibles. Pour utiliser Flexbox pour des colonnes pleine hauteur :

body {
  display: flex;
  min-height: 100vh;
}

.column {
  flex: 1;
}

Cette méthode offre plusieurs avantages :

• Elle crée des colonnes de hauteur égale.
• Elle permet le centrage vertical du contenu.
• Elle est responsive et s'adapte à différentes tailles d'écran.

Flexbox résout le problème de la pleine hauteur en faisant occuper au conteneur parent toute la hauteur du viewport, puis en permettant aux éléments enfants de grandir et de remplir cet espace. Cette approche est utile pour les mises en page avec plusieurs colonnes ou des structures complexes.