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

Les navigateurs modernes prennent en charge l'unité "viewport height". Cela permet d'étendre la division à la hauteur de la fenêtre d'affichage disponible. Je la trouve plus fiable que toute autre approche.

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

Answer 2

Ok, j'ai essayé quelque chose comme ça :

corps (normal)

#MainDiv { 
  /* where all the content goes */
  display: table;
  overflow-y: auto;
}

Ce n'est pas la façon exacte de l'écrire, mais si vous faites en sorte que la division principale s'affiche comme un tableau, elle s'étend et j'ai ensuite mis en place des barres de défilement.

Answer 3

Il suffit d'ajouter ces deux lignes dans votre css id #some_div

display: block;
overflow: auto;

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

Answer 4

SUPERPOSITION SANS POSITION:FIXE

Un moyen vraiment cool que j'ai trouvé pour un menu récent était de définir le corps de l'article :

position: relative

et définissez votre classe wrapper comme ceci :

#overlaywrapper {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: #00000080;
    z-index: 100;
}

Cela signifie que vous n'avez pas à définir une position fixe et que vous pouvez toujours autoriser le défilement. Je l'ai utilisé pour superposer des menus qui sont VRAIMENT grands.

Answer 5

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

Avez-vous essayé de régler le propriété de débordement du conteneur en visible ou en auto ?

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

En ajoutant cela, le conteneur noir devrait atteindre la taille requise par votre conteneur dynamique. Je préfère visible à auto parce que auto semble venir avec des barres de défilement...