Hauteur Div 100% et se dilate pour s’adapter au contenu

J’ai un élément div sur ma page avec sa hauteur réglée à 100%. La hauteur du corps est également réglée à 100%. La div interne a un fond et tout cela et est différente du fond du corps. Cela fonctionne pour rendre la hauteur de div 100% de la hauteur de l’écran du navigateur, mais le problème est que j’ai du contenu dans ce div qui s’étend verticalement au-delà de la hauteur de l’écran du navigateur. Lorsque je fais défiler la page, le div se termine à l’endroit où vous deviez commencer à faire défiler la page, mais le contenu déborde au-delà. Comment est-ce que je fais toujours le div aller jusqu’au fond pour adapter le contenu interne?

Voici une simplification de mon CSS:

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

Une fois que je fais défiler la page, la noirceur se termine et le contenu circule sur le fond rouge. Peu importe que je mette le positon sur relatif ou absolu sur le #some_div, le problème se produit de toute façon. Le contenu à l’intérieur de #some_div est principalement positionné de manière absolue, et il est généré dynamicment à partir d’une firebase database, de sorte que sa hauteur ne peut pas être connue à l’avance.

Edit: Voici une capture d’écran du problème: problème de div

Voici ce que vous devriez faire dans le style CSS, sur le div principal

 display: block; overflow: auto; 

Et ne touchez pas la height

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

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

Habituellement, ce problème survient lorsque les éléments Child d’une Div 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:

 

Cela devrait toujours fonctionner. Vous pouvez appeler le nom de la classe en tant que .group au lieu de .clearfix , car cela rend le code plus sémantique. Notez que, il n’est pas nécessaire d’append le point ou même un espace dans la valeur de contenu entre les guillemets “”. En outre, débordement: auto; peut résoudre le problème mais il provoque d’autres problèmes comme l’affichage de la barre de défilement et n’est pas recommandé.

Source: Blog de Lisa Catalano et Chris Coyier

Si vous ne laissez que la height: 100% et utilisez display:block; le div prendra autant d’espace que le contenu à l’intérieur du div . De cette façon, tout le texte restra sur le fond noir.

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 dites au corps d’avoir une hauteur de 100%, son arrière-plan ne peut être aussi haut que la taille d’un navigateur “viewport” (la zone d’affichage excluant les barres d’outils et barres de navigation bords de la fenêtre). Si le contenu est plus grand qu’une fenêtre, il débordera la hauteur consacrée à l’arrière-plan.

Cette propriété min-height sur le corps doit forcer l’arrière-plan à être au moins aussi haut qu’une fenêtre si votre contenu ne remplit pas une page entière vers le bas.

Ancienne question, mais dans mon cas, j’ai trouvé en utilisant la position:fixed résolu pour moi. Ma situation aurait pu être un peu différente cependant. J’avais un div semi-transparent superposé avec une animation de chargement que j’avais besoin d’afficher pendant le chargement de la page. Donc, en utilisant la height:auto / 100% ou min-height: 100% tous les deux ont rempli la fenêtre mais pas la zone hors écran. Utilisation de la position:fixed fait défiler cette superposition avec l’utilisateur, elle a donc toujours recouvert la zone visible et gardé mon animation de préchargement centrée sur l’écran.

Je ne suis pas tout à fait sûr d’avoir compris la question car il s’agit d’une réponse assez simple, mais voilà … 🙂

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

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

L’ajout de cela devrait pousser le conteneur noir à la taille requirejse par votre conteneur dynamic. Je préfère le visible à l’auto car auto semble venir avec des barres de défilement …

Même vous pouvez faire comme ça

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

Cela inclura votre chaque div dynamic selon le contenu. Supposons que si vous avez une div commune avec class, cela augmentera la hauteur de chaque div dynamic en fonction du contenu

ok j’ai essayé quelque chose comme ça

corps (normal)

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

Ce n’est pas la manière exacte de l’écrire, mais si vous faites apparaître le div principal sous forme de tableau, il s’est agrandi et j’ai ensuite obtenu des barres de défilement.

Cette question peut être ancienne, mais elle mérite une mise à jour. Voici une autre façon de le faire:

 #yourdiv { display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: flex; width:100%; height:100%; } 

J’ai regardé quelques réponses et les ai combinées. C’est ici:

 #some-div { overflow:scroll; display:block; min-height:100%; } 

Cette réponse fonctionne le mieux, car la réponse actuellement prise en charge active l’option automatique de débordement (qui diffère de celle utilisée dans certains navigateurs). Cela vous permet également de définir une hauteur minimale contrairement à la réponse acceptée où vous ne pouvez pas toucher la hauteur.

Les navigateurs modernes prennent en charge l’unité “viewport height”. Cela étendra le div à la hauteur de la fenêtre d’affichage disponible. Je trouve cela plus fiable que toute autre approche.

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