faire en sorte que la hauteur de div se développe avec son contenu

Essayez ceci: overflow: auto;

Cela a fonctionné pour mon problème..

Ajouter ce qui suit:

overflow:hidden;
height:1%;

À votre div principale. Élimine le besoin de <br /> supplémentaire pour le clair.

Comme alternative, vous pouvez également essayer ceci qui peut être utile dans certaines situations

display:table;

JsFiddle

Je voudrais juste utiliser

height: auto;

Dans votre div. Oui, je sais que je suis un peu en retard, mais j'ai pensé que cela pourrait aider quelqu'un comme ça m'aurait aidé si c'était là.

Thw suivant devrait fonctionner:

.main #main_content {
    padding: 5px;
    margin: 0px;
    overflow: auto;
    width: 100%; //for some explorer browsers to trigger hasLayout
}

Utilisez la balise span avec {[0] } CSS attaché à elle. Vous pouvez ensuite utiliser CSS et le manipuler comme un div de nombreuses façons, mais si vous n'incluez pas un width ou height, il se développe et se rétracte en fonction de son contenu.

J'espère que ça aide.

Typiquement, je pense que cela peut être résolu en forçant une règle clear:both sur le dernier élément enfant du #items_list.

Vous pouvez utiliser:

#items_list:last-child {clear: both;}

Ou, si vous utilisez un langage dynamique, ajoutez une classe supplémentaire au dernier élément généré dans n'importe quelle boucle créant la liste elle-même, de sorte que vous vous retrouvez avec quelque chose dans votre html comme:

<div id="list_item_20" class="last_list_item">

Et css

.last_list_item {clear: both; }

Ce problème se pose lorsque les éléments enfants D'un Div 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 : Après

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

Ensuite, dans votre HTML, ajoutez le .clearfix classe à 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 .le groupe au lieu de .clearfix , comme 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 de Contenu entre les guillemets "". Aussi, overflow: auto; pourrait résoudre le problème, mais il provoque d'autres problèmes comme l'montrant la barre de défilement n'est pas recommandée.

Source: Blog de Lisa Catalano et Chris Coyier

Ajoute une propriété float à la #main_content div - elle se développera alors pour contenir son contenu flottant

Avant de faire quoi que ce soit vérifiez les règles css avec:

{ position:absolute }

Supprimer si existent et n'en ont pas besoin.

On dirait que cela fonctionne

html {
 width:100%;
 height:auto;
 min-height:100%
} 

Il prend la taille de l'écran au minimum, et si le contenu se développe, il grandit.

Les éléments flottants n'occupent pas l'espace à l'intérieur de l'élément parent, comme son nom l'indique, ils flottent! Ainsi, si une hauteur n'est pas explicitement fournie à un élément ayant ses éléments enfants flottés, alors l'élément parent semblera rétrécir et ne pas accepter les dimensions de l'élément enfant, aussi si son overflow:hidden; donné ses enfants peuvent ne pas apparaître à l'écran. Il existe plusieurs façons de traiter ce problème:

1. Insérez un autre élément sous l'élément flottant avec la propriété clear:both;, ou utilisez clear:both; sur :after de l'élément flottant.

2. Utiliser display:inline-block; ou flex-box au lieu de float.

En CSS: #clear_div{clear:both;}

Après La Balise div de la div interne, Ajoutez cette nouvelle div suivante

<div id="clear_div"></div>

Http://www.w3schools.com/cssref/pr_class_clear.asp : pour plus d'informations

J'ai ajouté Bootstrap à un projet avec des balises section que j'avais définies à 100% de la hauteur de l'écran. Cela a bien fonctionné jusqu'à ce que je rende le projet réactif, à quel point j'ai emprunté une partie de la réponse de jennyfofenny donc, mon fond de section correspond à l'arrière-plan du contenu lorsque la taille de l'écran a changé sur des écrans plus petits.

Mon nouveau section CSS ressemble à ceci:

section {
    // min-height so it looks good on big screen
    // but resizes on a small-screen
    min-height: 100%;
    min-height: 100vh;
    width:100%;
    width:100vh;
}

Disons que vous avez une section qui est d'une certaine couleur. En utilisant min-height, si la largeur de la section rétrécit en raison d'un écran plus petit, la hauteur de la section se développera, le contenu restera dans la section, et votre arrière-plan restera la couleur désirée.

Je cours moi - même sur un projet-j'avais une table à l'intérieur d'une div qui débordait du bas de la div. Aucun des correctifs de hauteur que j'ai essayé n'a fonctionné, mais j'ai trouvé une solution bizarre pour cela, et c'est de mettre un paragraphe au bas de la div avec juste un point dedans. Ensuite, le style de la" couleur " du texte pour être le même que l'arrière-plan du conteneur. Travaillé soigné à votre guise et aucun javascript requis. Un espace insécable ne fonctionnera pas - pas plus qu'une image transparente.

Apparemment, il avait juste besoin de voir qu'il y a du contenu sous la table afin de s'étirer pour le contenir. Je me demande si cela fonctionnera pour quelqu'un d'autre.

C'est le genre de chose qui fait que les concepteurs ont recours à des mises en page basées sur des tables-le temps que j'ai passé à comprendre ce genre de choses et à le rendre compatible avec les navigateurs croisés me rend fou.

J'ai essayé ceci et cela a fonctionné

<div style=" position: absolute; direction: ltr;height:auto; min-height:100%">   </div>

Avez-vous essayé la manière traditionnelle? donnez la hauteur du conteneur principal: auto

#container{height:auto}

J'ai utilisé ceci et cela a fonctionné la plupart du temps avec moi.

Si vous utilisez jQuery UI, ils ont déjà une classe les œuvres juste un charme ajoutez un <div> en bas à l'intérieur de la div que vous voulez développer avec height:auto; ajoutez ensuite un nom de classe ui-helper-clearfix ou utilisez cet attribut de style et ajoutez comme ci-dessous:

<div style=" clear:both; overflow:hidden; height:1%; "></div>

Ajoutez la classe jQuery UI à la div clear, pas la div que vous souhaitez développer.

Je sais que c'est une sorte de vieux thread, cependant, cela peut être réalisé avec la propriété min-height CSS d'une manière propre, donc je vais laisser ceci ici pour de futures références:

J'ai fait un violon basé sur le code posté par OP ici: http://jsfiddle.net/U5x4T/1/, lorsque vous supprimez et ajoutez des divs à l'intérieur, vous remarquerez comment le conteneur se développe ou se réduit en taille

Les 2 seules choses dont vous avez besoin pour y parvenir, en plus du code OP est:

* débordement dans le conteneur principal (requis pour les divs flottants)

* propriété CSS min-height, plus d'informations disponibles ici: http://www.w3schools.com/cssref/pr_dim_min-height.asp

Affichage ajouté: en ligne à la div et il a grandi auto (pas les choses de défilement ) lorsque le contenu de la hauteur est devenu plus grand que la hauteur définie div de 200px

Manière Très simple

Sur DIV parent:

height: 100%;

Ce travail pour moi à chaque fois

Pas besoin d'utiliser beaucoup de CSS, utilisez simplement bootstrap, puis utilisez:

class="container"

Pour le div qui doit être rempli.

Vous pouvez obtenir de l'amorçage à partir d'ici