Div hauteur 100% et s'étend pour s'adapter au contenu

Question

J'ai un élément div sur ma page dont la hauteur est fixée à 100 %. La hauteur du corps de la page est également fixée à 100 %. Le div interne a un arrière-plan et tout cela et est différent de l'arrière-plan du corps. Cela fonctionne pour que la hauteur de la division corresponde à 100 % de la hauteur de l'écran du navigateur, mais le problème est que le contenu de cette division dépasse verticalement la hauteur de l'écran du navigateur. Lorsque je fais défiler la page vers le bas, la division se termine à l'endroit où il fallait commencer à la faire défiler, mais le contenu déborde au-delà. Comment faire pour que la division aille toujours jusqu'en bas 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 prend fin et le contenu s'écoule sur le fond rouge. Peu importe que je définisse la position relative ou absolue de la #some_div, le problème se pose dans les deux cas. Le contenu à l'intérieur du #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, de sorte que sa hauteur ne peut être connue à l'avance.

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

Answer 1

Voici ce que vous devez faire dans le style CSS, sur l'élément principal div

display: block;
overflow: auto;

Et ne touchez pas height

Answer 2

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

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

Answer 3

#some_div {    
  height: fit-content;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content

Answer 4

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

Dans votre fichier CSS, écrivez la classe suivante appelée .clearfix ainsi que le pseudo-sélecteur :après

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

Ensuite, dans votre HTML, ajoutez la classe .clearfix à votre Div parent, par exemple :

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

Cela devrait toujours fonctionner. Vous pouvez appeler le nom de la classe comme .groupe au lieu de .clearfix car cela rendra le code plus sémantique. Notez qu'il n'est pas nécessaire d'ajouter le point ou même un espace dans la valeur de Content entre les doubles guillemets "". Aussi, débordement : auto ; peut résoudre le problème, mais il entraîne 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

Answer 5

Cette question est peut-être ancienne, mais elle mérite une mise à jour. Voici un autre moyen d'y parvenir :

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