faire des div à l'hauteur de développer avec son contenu

Vous devez forcer un clear:both avant la #main_content div est fermé. J'aurais probablement se déplacer à la <br class="clear" />; dans le #main_content div et définir le CSS à:

.clear { clear: both; }

Mise à jour: Cette question obtient toujours une bonne quantité de trafic, donc j'ai voulu mettre à jour la réponse à une alternative moderne à l'aide d'un nouveau mode de mise en CSS3 Flexibles des boîtes ou des Flexbox:

CSS:

body {
  margin: 0;
}

.flex-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  background-color: #3F51B5;
  color: #fff;
}

section.content {
  flex: 1;
}

footer {
  background-color: #FFC107;
  color: #333;
}

HTML:

<div class="flex-container">
  <header>
    <h1>
     Header   
    </h1>
  </header>

  <section class="content">
    Content
  </section>

  <footer>
    <h4>
      Footer
    </h4>
  </footer>
</div>

La plupart des navigateurs modernes supportent actuellement Flexbox et fenêtre d'affichage des unités de, mais si vous avez de maintenir le soutien pour les anciens navigateurs, assurez-vous de vérifier la compatibilité pour la version du navigateur.

ajouter les éléments suivants:

overflow:hidden;
height:1%;

principale de votre div. Élimine le besoin pour le <br /> pour l'effacer.

Je voudrais juste utiliser

height: auto;

dans votre div. Oui, je sais, je suis un peu en retard mais j'ai pensé que cela pourrait aider quelqu'un comme elle m'aurait aidée si elle était ici.

Utiliser la balise span avec display:inline-block css attaché à elle. Vous pouvez ensuite utiliser le CSS et le manipuler comme un div dans beaucoup de façons, mais si vous n'incluez pas le width ou height il se dilate et se rétracte en fonction de son contenu.

Espère que ça aide.

Ce problème se pose lorsque les éléments Enfants d'un Div Parent sont flotté. Voici la Dernière Solution du problème:

Dans votre fichier CSS écrire la classe suivante appelé .clearfix avec le pseudo sélecteur de :après

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

Ensuite, dans votre code HTML, ajouter le .clearfix classe à votre Div parent. Par exemple:

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

Il doit travailler toujours. Vous pouvez appeler le nom de la classe comme .groupe au lieu de .clearfix , car elle rend 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

Avant de faire quelque chose vérifier les règles css avec:

{ position:absolute }

Supprimer si existent et n'ont pas besoin d'eux.

Ressemble à ceci fonctionne

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

Il prend la taille d'écran minimum, et si le contenu s'étend, elle grandit.

En CSS: #clear_div{clear:both;}

Après la balise div de l'intérieur de la div ajouter cette nouvelle div suivants

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

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

Avez-vous essayé la méthode traditionnelle?
donner le conteneur principal height:auto

#container{height:auto}

J'ai utilisé cela et il a travaillé la plupart du temps avec moi.

J'ai essayé et cela a fonctionné

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

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

J'ai fait du violon basé sur l'OP posté code ici: http://jsfiddle.net/U5x4T/1/, comme vous le supprimer et ajouter des divs à l'intérieur, vous remarquerez comment le conteneur agrandit ou réduit la taille

Les 2 seules choses que vous besoin pour atteindre cet objectif, en plus de l'OP code est:

*Débordement dans le conteneur principal (obligatoire pour les divs flottantes)

*min-hauteur de la propriété css, plus d'infos disponibles ici: http://www.w3schools.com/cssref/pr_dim_min-height.asp

Vous pouvez utiliser Grille CSS de Mise en page. Le soutien est assez large pour le moment: le vérifier sur caniuse.

Ici est la exemple sur jsfiddle. Aussi exemple avec des tonnes de texte genre de choses.

Code HTML:

<div class="container">
  <div class="header">
   Header
  </div>
  <div class="content">
   Content
  </div>
  <div class="footer">
   Footer
  </div>
</div>

Code CSS:

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

.container {
  width: 100%;
  height: 100%;

  display: grid;
  grid-template-rows: 100px auto 150px;
  grid-template-columns: auto;
}
//style stuff