Remplir l'espace d'écran restant avec une division de contenu en HTML

Remplir l'espace d'écran restant avec une division de contenu en HTML
Remplir l'espace d'écran restant avec une division de contenu en HTML
Jules David
Mardi 16 juillet 2024 à 17:38:51

Optimisation des mises en page pour le contenu pleine hauteur

Créer une application Web qui utilise efficacement tout l’espace de l’écran est un défi courant. S'assurer que le contenu occupe toute la hauteur de l'écran, en particulier lorsqu'il y a un en-tête dynamique, nécessite une planification et une mise en œuvre minutieuses. L'en-tête contient souvent des éléments essentiels tels que des logos et des informations sur le compte, et sa hauteur peut varier.

L'objectif est de faire en sorte que la division de contenu occupe l'espace restant à l'écran sans recourir aux tables. Cela peut être délicat, en particulier lorsque les éléments de la division de contenu doivent s'adapter aux hauteurs en pourcentage. Cet article explique comment réaliser cette mise en page à l'aide de techniques CSS modernes.

Commande Description
flex-direction: column; Définit l'axe principal du conteneur flexible pour qu'il soit vertical, en empilant les enfants de haut en bas.
flex: 1; Permet à l’élément flexible de croître et de remplir l’espace disponible dans le conteneur flexible.
grid-template-rows: auto 1fr; Définit une disposition en grille avec deux lignes, où la première ligne a une hauteur automatique et la deuxième ligne occupe l'espace restant.
overflow: auto; Permet le défilement si le contenu déborde du conteneur, en ajoutant des barres de défilement si nécessaire.
height: 100vh; Définit la hauteur d'un élément à 100 % de la hauteur de la fenêtre.
grid-template-rows Spécifie la taille de chaque ligne dans une disposition en grille.
display: flex; Définit un conteneur flexible, activant le modèle de disposition flexbox pour ses enfants.

Utiliser des techniques de mise en page CSS modernes

Dans le premier script, nous utilisons Flexbox faire un div remplir l'espace restant de l'écran. Le container la classe est réglée sur display: flex et flex-direction: column. Cela empile l'en-tête et le contenu verticalement. L'en-tête a une hauteur fixe, tandis que le contenu utilise flex: 1 pour remplir l'espace restant. Cette approche garantit que le contenu div s'ajuste dynamiquement pour occuper toute hauteur restante, quelle que soit la hauteur de l'en-tête. Le overflow: auto La propriété permet au contenu div de défiler si le contenu dépasse la zone visible, en conservant une mise en page propre sans problèmes de débordement.

Dans le deuxième scénario, CSS Grid est employé pour la mise en page. Le container la classe est réglée sur display: grid avec dix. Cela crée une grille avec deux lignes : la première ligne (en-tête) ajuste automatiquement sa hauteur et la deuxième ligne (contenu) remplit l'espace restant. Semblable à l'exemple Flexbox, la division de contenu a un overflow: auto propriété pour gérer le contenu de débordement avec élégance. Les deux méthodes éliminent le besoin de tableaux, en tirant parti des techniques de mise en page CSS modernes pour obtenir une conception flexible et réactive qui s'adapte aux différentes hauteurs d'en-tête et garantit que le contenu remplit le reste de la page.

Utilisation de Flexbox pour créer un espace d'écran restant de remplissage Div

HTML et CSS avec Flexbox

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Layout</title>
  <style>
    body, html {
      margin: 0;
      height: 100%;
    }
    .container {
      display: flex;
      flex-direction: column;
      height: 100vh;
    }
    .header {
      background-color: #f8f9fa;
      padding: 10px;
    }
    .content {
      flex: 1;
      background-color: #e9ecef;
      overflow: auto;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>Header</h1>
    </div>
    <div class="content">
      <p>Content goes here...</p>
    </div>
  </div>
</body>
</html>

Utiliser la grille CSS pour remplir l'espace d'écran restant

HTML et CSS utilisant la disposition en grille

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Layout</title>
  <style>
    body, html {
      margin: 0;
      height: 100%;
    }
    .container {
      display: grid;
      grid-template-rows: auto 1fr;
      height: 100vh;
    }
    .header {
      background-color: #f8f9fa;
      padding: 10px;
    }
    .content {
      background-color: #e9ecef;
      overflow: auto;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>Header</h1>
    </div>
    <div class="content">
      <p>Content goes here...</p>
    </div>
  </div>
</body>
</html>

Techniques avancées pour les mises en page de contenu pleine hauteur

Une autre méthode efficace pour assurer un div remplit l'espace restant de l'écran utilise le Viewport Height (vh) unité en combinaison avec Calc(). Le vh L'unité représente un pourcentage de la hauteur de la fenêtre, ce qui la rend utile pour les conceptions réactives. En définissant la hauteur du contenu div sur calc(100vh - [header height]), vous pouvez ajuster dynamiquement la hauteur en fonction de la hauteur de l'en-tête. Cette approche fonctionne bien pour les en-têtes avec des hauteurs fixes ou connues, garantissant que le contenu div remplit toujours l'espace restant. De plus, en utilisant vh Les unités permettent de maintenir un comportement de mise en page cohérent sur différentes tailles d'écran.

Pour des mises en page plus complexes, JavaScript peut être utilisé pour calculer et ajuster dynamiquement la hauteur des éléments. En attachant des écouteurs d'événement à l'événement de redimensionnement de la fenêtre, vous pouvez recalculer la hauteur du contenu div chaque fois que la taille de la fenêtre change. Cette méthode offre une plus grande flexibilité et peut gérer différentes hauteurs d’en-tête et du contenu dynamique. La combinaison de JavaScript avec CSS garantit que votre mise en page reste réactive et adaptable aux différentes tailles d'écran et aux changements de contenu, offrant ainsi une solution robuste pour les divs de contenu pleine hauteur dans les applications Web.

Questions et solutions courantes pour les mises en page de contenu pleine hauteur

  1. Comment puis-je utiliser la fonction calc() pour les hauteurs dynamiques ?
  2. Le calc() La fonction vous permet d'effectuer des calculs pour déterminer les valeurs des propriétés CSS, telles que height: calc(100vh - 50px) pour tenir compte d'un en-tête de 50 px.
  3. Quelle est l’unité vh en CSS ?
  4. Le vh unité représente la hauteur de la fenêtre d'affichage, où 1vh équivaut à 1 % de la hauteur de la fenêtre, ce qui le rend utile pour une conception réactive.
  5. Comment gérer les hauteurs de linteau dynamiques ?
  6. Utilisez JavaScript pour mesurer la hauteur de l'en-tête et ajuster la hauteur du contenu div en conséquence, en vous assurant qu'il remplit l'espace restant de manière dynamique.
  7. Flexbox et Grid peuvent-ils être combinés ?
  8. Oui, vous pouvez combiner Flexbox et Grid mises en page au sein du même projet pour exploiter leurs atouts pour différentes exigences de mise en page.
  9. Comment puis-je garantir la possibilité de défilement dans la division de contenu ?
  10. Définir les div de contenu overflow propriété à auto pour ajouter des barres de défilement lorsque le contenu dépasse la hauteur du div.
  11. Quels sont les avantages de l’utilisation de JavaScript pour les ajustements de mise en page ?
  12. JavaScript offre des ajustements en temps réel et une flexibilité pour gérer le contenu dynamique et les différentes tailles d'éléments, améliorant ainsi la réactivité de la mise en page.
  13. Est-il possible d’éviter d’utiliser des tableaux pour la mise en page ?
  14. Oui, les techniques de mise en page CSS modernes comme Flexbox et Grid offrent des solutions plus flexibles et plus réactives que les mises en page traditionnelles basées sur des tableaux.
  15. Comment faire en sorte qu'un div remplisse la hauteur restante à l'aide de CSS Grid ?
  16. Définissez le conteneur de grille sur dix, avec la deuxième ligne (contenu) définie sur 1fr pour remplir la hauteur restante.
  17. Quel rôle joue l’unité 100vh dans les aménagements pleine hauteur ?
  18. Le 100vh L'unité représente toute la hauteur de la fenêtre, permettant aux éléments d'évoluer de manière réactive en fonction de la taille de la fenêtre.
  19. Puis-je utiliser min-height pour les mises en page réactives ?
  20. Oui, en utilisant min-height garantit qu'un élément conserve une hauteur minimale, ce qui peut aider à gérer le débordement de contenu et à maintenir la cohérence de la mise en page.

Récapitulatif des techniques de mise en page

En tirant parti des techniques CSS modernes telles que Flexbox et Grid, les développeurs Web peuvent créer efficacement des mises en page dans lesquelles un contenu div remplit l'espace restant de l'écran, garantissant ainsi réactivité et adaptabilité. Ces méthodes éliminent le besoin de mises en page obsolètes basées sur des tableaux et offrent plus de flexibilité dans la conception.

Combiner des unités CSS comme vh et fonctionne comme calc() avec JavaScript pour les ajustements dynamiques peut améliorer encore la réactivité de la mise en page. Cela garantit une expérience utilisateur transparente sur différents appareils et tailles d’écran, rendant l’application Web plus robuste et conviviale.