web-dev-qa-db-fra.com

Hauteur div 100% et s'agrandit pour s'adapter au contenu

J'ai un élément div sur ma page dont la hauteur est définie à 100%. La hauteur du corps est également fixée à 100%. La div interne a un fond et tout ça et est différente du fond du corps. Cela fonctionne pour rendre la hauteur de la div 100% de la hauteur de l'écran du navigateur, mais le problème est que j'ai un contenu à l'intérieur de cette div qui s'étend verticalement au-delà de la hauteur de l'écran du navigateur. Lorsque je fais défiler l'écran vers le bas, la division se termine au point où vous deviez commencer à faire défiler la page, mais le contenu déborde au-delà de cela. Comment faire en sorte que la div aille toujours jusqu'au fond pour s'adapter au contenu intérieur?

Voici une simplification de mon CSS:

body {
    height:100%;
    background:red;
}

#some_div {
    height:100%;
    background:black;
}

Une fois que j'ai fait défiler la page, la noirceur s'est terminée et le contenu s'est écoulé sur le fond rouge. Peu importe que je règle la position sur relative ou absolue sur #some_div, le problème se pose de toute façon. Le contenu de #some_div est généralement positionné de manière absolue, et il est généré dynamiquement à partir d'une base de données afin que sa hauteur ne puisse pas être connue à l'avance.

Edit: Voici une capture d'écran du problème: div problem

csshtmlheightoverflow
130
Joey

Voici ce que vous devriez faire dans le style CSS, sur la variable principale div

display: block;
overflow: auto;

Et ne touchez pas height

241
João Pimentel Ferreira

Définissez height sur auto et min-height sur 100%. Cela devrait le résoudre pour la plupart des navigateurs.

body {
  position: relative;
  height: auto;
  min-height: 100% !important;
}
52
Matthew Sprankle

Ce problème se pose généralement lorsque les éléments enfants d'une division parent sont flottants. Voici la Dernière solution du problème:

Dans votre fichier CSS, écrivez la classe suivante appelée .clearfix avec le pseudo sélecteur: after 

.clearfix:after {
content: "";
display: table;
clear: both;
}

Ensuite, dans votre code HTML, ajoutez la classe .clearfix à votre div parent. Par exemple:

<div class="clearfix">
    <div></div>
    <div></div>
</div>

Cela devrait fonctionner toujours. Vous pouvez appeler le nom de la classe sous la forme .group au lieu de .clearfix, car cela rendra le code plus sémantique. Notez que, il n'est pas nécessaire d'ajouter le point ou même un espace dans la valeur de Contenu entre la double citation "". En outre, overflow: auto; pourrait résoudre le problème mais cela pose d'autres problèmes, comme l'affichage de la barre de défilement, ce qui n'est pas recommandé.

Source: Blog de Lisa Catalano et Chris Coyier

12
Ifti Mahmud

Si vous laissez simplement le height: 100% et utilisez display:block;, la div prendra autant d'espace que le contenu de la div. De cette façon, tout le texte restera sur le fond noir. 

6
RonnieVDPoel

Essaye ça:

body { 
    min-height:100%; 
    background:red; 
} 

#some_div {
    min-height:100%; 
    background:black; 
}

IE6 et les versions antérieures ne prennent pas en charge la propriété min-height.

Je pense que le problème est que lorsque vous indiquez au corps une hauteur de 100%, son arrière-plan ne peut être aussi haut que la hauteur d'un navigateur "viewport" bords de la fenêtre). Si le contenu est supérieur à une fenêtre d'affichage, il dépassera la hauteur consacrée à l'arrière-plan.

Cette propriété hauteur-hauteur sur le corps doit forcer l'arrière-plan à être au moins aussi grand qu'une fenêtre d'affichage si votre contenu ne remplit pas une page entière vers le bas, contenu.

4
Ace Frahm

Vieille question, mais dans mon cas, j’ai trouvé l’utilisation de position:fixed qui m’a permis de résoudre ce problème . J'avais une div semi-transparente superposée avec une animation de chargement que je devais afficher pendant le chargement de la page. Donc, en utilisant height:auto / 100% ou min-height: 100%, les deux remplissaient la fenêtre mais pas la zone hors écran. L'utilisation de position:fixed a fait défiler cette superposition avec l'utilisateur, de sorte qu'elle recouvre toujours la zone visible et garde mon animation de préchargement centrée sur l'écran.

3
Thomas Smart

Cette question est peut-être ancienne, mais elle mérite une mise à jour.

#yourdiv {
    display: flex;
    width:100%;
    height:100%;
}
0
user9459537

Je ne suis pas tout à fait sûr d’avoir compris la question car c’est une réponse assez simple, mais voilà ... :)

Avez-vous essayé de définir la propriété overflow du conteneur sur visible ou auto? 

#some_div {
    height:100%;
    background:black; 
    overflow: visible;
    }

Ajouter cela devrait pousser le conteneur noir à la taille requise par votre conteneur dynamique . Je préfère visible à auto car auto semble venir avec des barres de défilement ...

0
jlisham

Ajoutez simplement ces deux lignes dans votre identifiant CSS #some_div 

display: block;
overflow: auto;

Après cela, vous obtiendrez ce que vous cherchez!

0
singhviku

ok j'ai essayé quelque chose comme ça 

corps (normal)

MainDiv (où tout le contenu va): Display: table; overflow-y: auto

ce n'est pas la manière exacte de l'écrire, mais si vous faites l'affichage de la division principale sous forme de tableau, il s'est développé, puis j'ai obtenu des barres de défilement.

0
alex

Même toi tu peux faire comme ça

display:block;
overflow:auto;
height: 100%;

Cela inclura votre chaque div dynamique selon le contenu ..__ Supposons que si vous avez un div commun avec classe, il augmentera la hauteur de chaque div dynamique en fonction du contenu

0
ahmed sharief