interface Web
tutoriel CSS
Comment rendre la hauteur d'une balise div égale à la hauteur de la fenêtre du navigateur en utilisant CSS ?
Comment rendre la hauteur d'une balise div égale à la hauteur de la fenêtre du navigateur en utilisant CSS ?
Lorsque vous travaillez sur des projets de développement Web, il existe souvent des scénarios dans lesquels vous devez attribuer à une balise div toute la hauteur de la fenêtre du navigateur. Cela peut être particulièrement utile lors de la création de mises en page pleine page, de sections de héros ou d'éléments qui en ont besoin. pour couvrir tout l'espace vertical.
Cependant, obtenir cet effet souhaité à l'aide de CSS peut être un peu délicat en raison de la nature du modèle de boîte CSS et du comportement par défaut des propriétés de hauteur.
Dans cet article, nous explorerons différentes techniques pour définir une hauteur de fenêtre de navigateur à 100 % sur une balise div à l'aide de CSS. Nous discuterons de diverses méthodes CSS et fournirons des exemples de code pratiques pour chaque technique.
Hauteur d'utilisation : 100 %
Une approche pour donner à une balise div une hauteur de 100 % consiste à utiliser la propriété height : 100 %. Cependant, il est important de noter que cette approche comporte certains défis et limites.
En définissant height : 100 % sur un élément div, vous lui demandez d'occuper 100 % de la hauteur de l'élément parent. Cette approche fonctionne bien lorsque l'élément parent a une hauteur fixe explicitement définie en CSS. Cependant, en ce qui concerne la fenêtre du navigateur elle-même, les éléments html et body (l'élément parent de la balise div) n'ont pas de hauteur fixe par défaut.
Pour que la balise div remplisse toute la hauteur de la fenêtre du navigateur, vous devez vous assurer que la hauteur des éléments parents (html et body) est de 100 %. Vous pouvez y parvenir en appliquant le CSS suivant<!DOCTYPE html>
<html>
<head>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
height: 100%;
background-color: lightgray;
display: flex;
align-items: center;
justify-content: center;
}
.content {
width: 300px;
height: 200px;
background-color: white;
border: 1px solid gray;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<!-- Content goes here -->
</div>
</div>
</body>
</html>
Une fois que la hauteur de l'élément parent est définie sur 100 %, la définition de height : 100 % sur la balise div cible entraînera son expansion pour remplir toute la hauteur de la fenêtre du navigateur.
Cependant, il y a quelques éléments à considérer lors de l'utilisation de cette méthode −
Scroll− Si le contenu à l'intérieur du div dépasse la hauteur de la fenêtre du navigateur, une barre de défilement apparaîtra pour permettre de faire défiler le contenu.
Éléments imbriqués − Si la balise div est imbriquée dans d'autres éléments avec des hauteurs basées sur un pourcentage, vous devez vous assurer que tous les éléments parents ont une hauteur de 100 % pour que l'approche fonctionne correctement.
Compatibilité − Les anciennes versions d'Internet Explorer (IE) peuvent ne pas prendre en charge correctement l'approche hauteur : 100 %, il est donc important de tester votre implémentation sur différents navigateurs.
Bien que l'approche hauteur : 100 % puisse être une solution simple dans certains cas, elle a ses limites et peut nécessiter des considérations supplémentaires. Dans les prochaines sections, nous explorerons des technologies alternatives offrant plus de flexibilité et une meilleure prise en charge du navigateur.
Technique 1 : Utilisation de la hauteur : 100vh
Une autre technique pour définir la hauteur d'une balise div à 100 % de la fenêtre du navigateur consiste à utiliser l'attribut height : 100vh. L'unité vh représente un pourcentage de la hauteur de la fenêtre.
En définissant height: 100vh sur un élément div, vous lui demandez d'occuper 100 % de la hauteur de la fenêtre, quels que soient ses éléments parents. Cette approche fournit une solution plus simple sans avoir besoin de définir les éléments parents. hauteur explicitement.
Exemple
Voici un extrait de code complet démontrant cette technique -
<!DOCTYPE html>
<html>
<head>
<style>
.container {
height: 100vh;
background-color: lightgray;
display: flex;
align-items: center;
justify-content: center;
}
.content {
width: 300px;
height: 200px;
background-color: white;
border: 1px solid gray;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<!-- Content goes here -->
</div>
</div>
</body>
</html>
Dans cet extrait de code, nous avons une structure HTML similaire à celle précédente, un div parent avec la classe "conteneur" et un div cible avec la classe "content". Appliquez des styles CSS pour obtenir l'effet souhaité.
La principale différence est que nous définissons la hauteur : 100vh sur la classe "conteneur". Cela provoque l'expansion du conteneur div sur toute la hauteur de la fenêtre. Le div interne "contenu" hérite de la hauteur et s'étirera également pour remplir toute la hauteur de la fenêtre.
En utilisant l'approche height: 100vh, vous pouvez facilement obtenir un div pleine hauteur sans définir explicitement la hauteur des éléments parents.
Astuce 2 : Utilisez Flexbox
Flexbox est un puissant module de mise en page CSS qui offre un moyen flexible de distribuer et d'aligner des éléments dans un conteneur. Il peut également être utilisé pour atteindre une hauteur de 100 % des balises div.
En utilisant les propriétés Flexbox, nous pouvons créer un conteneur qui se développe pour remplir l'espace vertical disponible. Voici un extrait de code complet qui démontre cette technique −
.Example
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-direction: column;
height: 100vh;
background-color: lightgray;
}
.content {
flex-grow: 1;
background-color: white;
border: 1px solid gray;
margin: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<!-- Content goes here -->
</div>
</div>
</body>
</html>
In this code snippet, we have a parent div element with a class of "container" and a child div with a class of "content". The CSS styles are applied to utilize Flexbox for achieving 100% height.
通过在 "container" 类上设置 display: flex，我们创建了一个 Flexbox 容器。添加 flex-direction: column 可以确保子元素垂直堆叠。height: 100vh 属性使容器扩展以填充整个视口的高度。
To make the "content" div take up the remaining vertical space, we set flex-grow: 1. This instructs the "content" element to grow and fill the available space within the Flexbox container.
技巧3：使用CSS Grid
CSS Grid is another powerful layout module that allows you to create complex grid-based layouts with ease. It can also be leveraged to achieve 100% height for a div tag.
By utilizing CSS Grid, we can create a grid container that expands to fill the available vertical space. Here's a complete code snippet that demonstrates this technique −
Example
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: grid;
grid-template-rows: 1fr;
height: 100vh;
background-color: lightgray;
}
.content {
background-color: white;
border: 1px solid gray;
margin: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<!-- Content goes here -->
</div>
</div>
</body>
</html>
In this code snippet, we have a parent div element with a class of "container" and a child div with a class of "content". The CSS styles are applied to utilize CSS Grid for achieving 100% height.
By setting display: grid on the "container" class, we create a CSS Grid container. The grid-template-rows: 1fr property sets the row template to 1fr, which means the available space is distributed evenly among the rows. This ensures that the "content" div takes up the full height of the container.
The height: 100vh property makes the container expand to fill the full height of the viewport.
技巧4：使用绝对定位
Another technique to give a div tag 100% height of the browser window is by using absolute positioning. By positioning the div element absolutely and setting its top, bottom, left, and right properties to 0, we can make it expand to fill the entire height of the viewport.
Example
这是一个完整的示例代码片段，演示了这个技术 −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
height: 100vh;
background-color: lightgray;
}
.content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: white;
border: 1px solid gray;
margin: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<!-- Content goes here -->
</div>
</div>
</body>
</html>
在这段代码片段中，我们有一个class为"container"的父div元素和一个class为"content"的子div元素。CSS样式被应用以利用绝对定位来实现100%的高度。
通过在"container"类上设置position: relative，我们为子div建立了一个定位上下文。这使我们能够将"content" div绝对定位相对于其父元素。
属性 top: 0, bottom: 0, left: 0 和 right: 0 将 "content" div 定位在其父元素的顶部、底部、左侧和右侧边缘。这将导致它拉伸并填充容器的整个高度。
Technique 5: 使用 Flexbox 和 Overflow
在某些情况下，您可能会遇到内容超过视口高度的情况。在这种情况下，您可以使用Flexbox和overflow属性的组合，以确保div保持100%的高度，同时允许溢出内容滚动。
示例
Here's a complete running example snippet that demonstrates this technique −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
flex-direction: column;
height: 100vh;
background-color: lightgray;
}
.content {
flex-grow: 1;
background-color: white;
border: 1px solid gray;
margin: 20px;
overflow: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
<!-- Content goes here -->
</div>
</div>
</body>
</html>
In this code snippet, we have a parent div element with a class of "container" and a child div with a class of "content". The CSS styles are applied to utilize Flexbox and handle overflow.
Similar to Technique 2, we set display: flex on the "container" class to create a Flexbox container. The flex-direction: column property ensures that the child elements are stacked vertically.
通过在“content”类上设置flex-grow: 1，div会扩展以占据容器中剩余的垂直空间。此外，如果内容超过div的高度，我们使用overflow: auto来启用内容的垂直滚动。
Conclusion
Achieving a 100% height for a
Each technique offers its advantages and may be more suitable depending on the specific requirements of your project. It's important to consider factors such as content overflow and browser compatibility when choosing the appropriate approach.
通过理解和实施这些技术，您可以确保您的Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Que signifie l'espace réservé en vue
May 07, 2024 am 09:57 AM
Dans Vue.js, l'attribut placeholder spécifie le texte d'espace réservé de l'élément d'entrée, qui s'affiche lorsque l'utilisateur n'a pas saisi de contenu, fournit des conseils ou des exemples de saisie et améliore l'accessibilité du formulaire. Son utilisation consiste à définir l'attribut placeholder sur l'élément d'entrée et à personnaliser l'apparence à l'aide de CSS. Les meilleures pratiques consistent à être pertinent par rapport à la contribution, à être court et clair, à éviter le texte par défaut et à prendre en compte l'accessibilité.
Que signifie span en js
May 06, 2024 am 11:42 AM
La balise span peut ajouter des styles, des attributs ou des comportements au texte. Elle est utilisée pour : ajouter des styles, tels que la couleur et la taille de la police. Définissez des attributs tels que l'identifiant, la classe, etc. Comportements associés tels que clics, survols, etc. Marquez le texte pour un traitement ultérieur ou une citation.
Que signifie rem en js
May 06, 2024 am 11:30 AM
REM en CSS est une unité relative par rapport à la taille de la police de l'élément racine (html). Il présente les caractéristiques suivantes : relative à la taille de la police de l'élément racine, non affectée par l'élément parent. Lorsque la taille de la police de l'élément racine change, les éléments utilisant REM s'ajusteront en conséquence. Peut être utilisé avec n’importe quelle propriété CSS. Les avantages de l'utilisation de REM incluent : Réactivité : gardez le texte lisible sur différents appareils et tailles d'écran. Cohérence : assurez-vous que les tailles de police sont cohérentes sur l’ensemble de votre site Web. Évolutivité : modifiez facilement la taille de police globale en ajustant la taille de police de l'élément racine.
Comment introduire des images dans vue
May 02, 2024 pm 10:48 PM
Il existe cinq façons d'introduire des images dans Vue : via une URL, une fonction require, un fichier statique, une directive v-bind et une image d'arrière-plan CSS. Les images dynamiques peuvent être gérées dans les propriétés calculées ou les écouteurs de Vue, et des outils fournis peuvent être utilisés pour optimiser le chargement des images. Assurez-vous que le chemin est correct sinon une erreur de chargement apparaîtra.
Comment envelopper l'invite dans js
May 01, 2024 am 06:24 AM
Lorsque vous utilisez la méthode prompt() en JavaScript, vous pouvez réaliser des sauts de ligne grâce aux trois méthodes suivantes : 1. Insérez le caractère « \n » à l'endroit où vous souhaitez couper la ligne. 2. Utilisez le caractère de saut de ligne dans le champ ; texte d'invite ; 3. Utilisez le style "white" -space: pre" de CSS pour forcer les sauts de ligne.
Qu'est-ce qu'un nœud dans js
May 07, 2024 pm 09:06 PM
Les nœuds sont des entités du DOM JavaScript qui représentent des éléments HTML. Ils représentent un élément spécifique de la page et peuvent être utilisés pour accéder et manipuler cet élément. Les types de nœuds courants incluent les nœuds d'élément, les nœuds de texte, les nœuds de commentaires et les nœuds de document. Grâce aux méthodes DOM telles que getElementById(), vous pouvez accéder aux nœuds et opérer sur eux, notamment en modifiant les propriétés, en ajoutant/supprimant des nœuds enfants, en insérant/remplaçant des nœuds et en clonant des nœuds. La traversée des nœuds aide à naviguer dans la structure DOM. Les nœuds sont utiles pour créer dynamiquement du contenu de page, la gestion des événements, l'animation et la liaison de données.
Dans quelle langue le plug-in du navigateur est-il écrit ?
May 08, 2024 pm 09:36 PM
Les plug-ins de navigateur sont généralement écrits dans les langages suivants : Langages front-end : JavaScript, HTML, CSS Langages back-end : C++, Rust, WebAssembly Autres langages : Python, Java
Comment définir des attributs inconnus dans vscode Méthode vscode pour définir des attributs inconnus
May 09, 2024 pm 02:43 PM
1. Tout d'abord, ouvrez l'icône des paramètres dans le coin inférieur gauche et cliquez sur l'option des paramètres. 2. Ensuite, recherchez la colonne CSS dans la fenêtre sautée. 3. Enfin, remplacez l'option déroulante dans le menu Propriétés inconnues par le bouton d'erreur. .
