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

Si vous laissez le height: 100% et utiliser display:block; le site div occupera autant d'espace que le contenu de l'écran. div . De cette façon, tout le texte restera sur le fond noir.

Answer 2

Essayez ç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 demandez au corps de la page d'avoir une hauteur de 100 %, son arrière-plan ne peut avoir qu'une hauteur égale à celle de la "fenêtre" d'un navigateur (la zone de visualisation qui exclut les barres d'outils, les barres d'état, les barres de menus et les bords de la fenêtre). Si le contenu est plus haut qu'une fenêtre, il dépassera 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 d'affichage si votre contenu ne remplit pas une page entière jusqu'au bas, mais elle doit aussi lui permettre de s'étendre vers le bas pour englober davantage de contenu intérieur.

Answer 3

Utiliser le flex

.parent{
    display: flex
}

.fit-parent{
    display: flex;
    flex-grow: 1
}

Answer 4

Vieille question, mais dans mon cas, j'ai trouvé que l'utilisation de position:fixed l'a résolu pour moi. Ma situation était peut-être un peu différente. J'avais une superposition semi transparente div avec une animation de chargement qui devait être affichée pendant le chargement de la page. Ainsi, en utilisant height:auto / 100% o min-height: 100% Les deux remplissent la fenêtre mais pas la zone hors écran. Utilisation de position:fixed a fait défiler cette superposition avec l'utilisateur, de sorte qu'elle couvre toujours la zone visible et que mon animation de préchargement reste centrée sur l'écran.

Answer 5

Dans mon cas, cela n'a fonctionné qu'avec :

height: auto;

Vous n'avez pas besoin de mettre display: block .