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

Même vous pouvez faire comme ceci

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

Cela comprendra chaque div dynamique selon le contenu. Supposons que vous ayez une div commune avec une classe, elle augmentera la hauteur de chaque div dynamique en fonction du contenu.

Answer 2

Vous pouvez également utiliser

 display: inline-block;

Le mien a fonctionné avec ceci