Comment remplir un div avec la hauteur restante de l'écran ?

Flexbox pour le contrôle de la mise en page

Flexbox est un modèle de mise en page CSS qui aide à distribuer l'espace et à aligner le contenu dans un conteneur. Il est utile pour créer des mises en page qui s'adaptent à différentes tailles d'écran et quantités de contenu.

Flexbox aide à résoudre le problème de hauteur restante en :

• Centrant le contenu verticalement
• Distribuant l'espace entre ou autour des éléments
• Dimensionnant les éléments enfants de manière flexible
• Modifiant l'ordre visuel des éléments

La plupart des navigateurs web modernes prennent en charge Flexbox, y compris Chrome, Firefox, Safari et Edge. Internet Explorer 11 a une prise en charge partielle, tandis que les versions plus anciennes ne le prennent pas en charge. Pour les navigateurs plus anciens, vous devrez peut-être utiliser d'autres méthodes ou inclure des polyfills.

Pour utiliser Flexbox, appliquez display: flex au conteneur parent. Cela active le contexte flex pour tous ses enfants directs. Vous pouvez ensuite utiliser les propriétés flex pour contrôler le comportement de ces éléments enfants dans le conteneur flex.

.container {
  display: flex;
  align-items: center;
  height: 100vh;
}

.content {
  width: 100%;
}

Mise en place de la structure HTML

Pour créer une mise en page où une div remplit la hauteur d'écran restante, vous avez besoin d'une structure HTML simple. Voici une configuration de base :

<div class="container">
  <header class="header">Contenu de l'en-tête</header>
  <main class="main-content">Contenu principal</main>
  <footer class="footer">Contenu du pied de page</footer>
</div>

Cette structure comprend une div conteneur qui contient trois éléments principaux : un en-tête, une zone de contenu principal et un pied de page. La div main-content remplira la hauteur d'écran restante.

<main class="main-content">
  <nav>Menu de navigation</nav>
  <article>Contenu principal de l'article</article>
  <aside>Contenu de la barre latérale</aside>
</main>

Application des propriétés CSS Flexbox

Pour faire fonctionner cette mise en page avec Flexbox, appliquez ces propriétés CSS :

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

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header, .footer {
  flex-shrink: 0;
}

.main-content {
  flex-grow: 1;
}

Voici les propriétés Flexbox clés :

1. display: flex; sur le conteneur active la mise en page Flexbox.
2. flex-direction: column; empile les éléments enfants verticalement.
3. min-height: 100vh; fait en sorte que le conteneur occupe au moins toute la hauteur de la fenêtre.
4. flex-shrink: 0; sur l'en-tête et le pied de page les empêche de rétrécir.
5. flex-grow: 1; sur main-content lui permet de grandir et de remplir l'espace restant.

Cette structure CSS crée une mise en page flexible où la zone de contenu principal s'étend pour remplir tout l'espace disponible entre l'en-tête et le pied de page, indépendamment de leurs tailles ou de la quantité de contenu.

Utilisation de CSS Grid pour des mises en page pleine hauteur

CSS Grid est un système de mise en page qui permet de créer des dispositions pleine hauteur. Il vous permet de définir des lignes et des colonnes, vous donnant ainsi le contrôle sur les mises en page bidimensionnelles.

Pour utiliser CSS Grid pour une mise en page pleine hauteur :

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

header, footer {
  grid-row: span 1;
}

main {
  grid-row: 2 / 3;
}

Ce CSS crée une mise en page à trois lignes où la ligne du milieu (contenu principal) remplit l'espace disponible.

CSS Grid comparé à Flexbox :

• Offre plus de contrôle sur l'alignement horizontal et vertical
• Fonctionne bien pour les mises en page avec plusieurs lignes et colonnes
• A moins de support des navigateurs que Flexbox

body {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(300px, 3fr);
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

Solutions basées sur JavaScript

Bien que les solutions CSS soient souvent meilleures, JavaScript peut également créer des mises en page pleine hauteur :

function adjustHeight() {
  const header = document.querySelector('header').offsetHeight;
  const footer = document.querySelector('footer').offsetHeight;
  const windowHeight = window.innerHeight;
  const main = document.querySelector('main');
  main.style.height = `${windowHeight - header - footer}px`;
}

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

Ce script calcule l'espace disponible et définit la hauteur du contenu principal.

Avantages de l'utilisation de JavaScript :

• Fonctionne dans les navigateurs plus anciens qui ne prennent pas en charge le CSS moderne
• Permet des changements basés sur le contenu ou les actions de l'utilisateur

Inconvénients de l'utilisation de JavaScript :

• Peut causer des décalages de mise en page s'il n'est pas bien géré
• Ajoute de la complexité au code
• Peut affecter les performances, en particulier sur les appareils plus lents