Hauteur div 100% et se développe 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 intérieure a un arrière-plan et tout cela et est différente de l'arrière-plan 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 à l'intérieur de cette div qui s'étend verticalement au-delà de la hauteur de l'écran du navigateur. Lorsque je fais défiler vers le bas, le div se termine au point où vous deviez commencer à faire défiler la page, mais le contenu déborde au-delà. Comment puis-je faire en sorte que le div aille toujours jusqu'en bas pour s'adapter au 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 s'écoule sur le fond rouge. Peu importe que je règle la position relative ou absolue sur #some_div, le problème se produit dans les deux cas. Le contenu à l'intérieur de #some_div est principalement positionné de manière absolue et est généré dynamiquement à partir d'une base de données, de sorte que sa hauteur ne peut pas être connue à l'avance.

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

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

display: block;
overflow: auto;

Et ne touche pas height

Réglez les heightà autoet 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 enfants d'une division 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 HTML, ajoutez la classe .clearfix à votre Div parente. Par exemple:

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

Cela devrait toujours fonctionner. Vous pouvez appeler le nom de la classe en tant que .group au lieu de .clearfix , car cela rendra le code plus sémantique. Notez que, il n'est pas nécessaire d'ajouter le point ou même un espace dans la valeur du contenu entre la double citation "". Aussi, débordement: auto; peut résoudre le problème, mais cela pose 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 laissez simplement le height: 100%et utilisez display:block;le, divcela prendra autant d'espace que le contenu à l'intérieur du div. De cette façon, tout le texte restera dans le fond noir.

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

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

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 grand que la hauteur d'une "fenêtre" du navigateur (la zone de visualisation qui exclut les barres d'outils et les barres d'état et les barres de menus du navigateur et les bords de fenêtre). Si le contenu est plus grand 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 si votre contenu ne remplit pas une page entière vers le bas, mais il doit également le laisser croître vers le bas pour englober plus de contenu intérieur.

Ancienne question, mais dans mon cas, j'ai trouvé que l'utilisation l'avait position:fixedrésolue pour moi. Ma situation aurait pu être un peu différente cependant. J'avais un semi-transparent superposé divavec une animation de chargement que j'avais besoin d'afficher pendant le chargement de la page. Donc, utiliser height:auto / 100%ou les min-height: 100%deux remplissait la fenêtre mais pas la zone hors écran. L'utilisation de position:fixedcette superposition a fait défiler avec l'utilisateur, de sorte qu'elle couvrait toujours la zone visible et gardait mon animation de préchargement centrée sur l'écran.

Ajoutez simplement ces deux lignes dans votre identifiant css #some_div

display: block;
overflow: auto;

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

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

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

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

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

Les navigateurs modernes prennent en charge l'unité "hauteur de la fenêtre". Cela étendra le div à la hauteur de la fenêtre disponible. Je la trouve plus fiable que toute autre approche.

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

Même toi, tu peux faire comme ça

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

Cela inclura votre chaque div dynamique selon le contenu. Supposons que si vous avez un div commun avec la classe, cela augmentera la hauteur de chaque div dynamique en fonction du contenu

Vous pouvez aussi utiliser

 display: inline-block;

le mien a travaillé avec ça

RECOUVREMENT SANS POSITION: FIXE

Une façon vraiment cool de comprendre cela pour un menu récent était de régler le corps sur:

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 la position fixe et que vous pouvez toujours permettre le défilement. J'ai utilisé ceci pour superposer des menus qui sont VRAIMENT grands.

utiliser flex

.parent{
    display: flex
}

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

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 manière exacte de l'écrire, mais si vous faites afficher le div principal sous forme de tableau, il se développe et j'ai implémenté des barres de défilement.