web-dev-qa-db-fra.com

faire que la taille de div augmente avec son contenu

J'ai ces divs imbriqués et j'ai besoin du conteneur principal à développer (en hauteur) pour accueillir les DIV à l'intérieur

    <!-- head -->
    ...
    <!-- /head -->

    <body class="main">
      <div id="container">
        <div id="header">
          <!--series of divs in here, graphic banner etc. -->
        </div>

    <div id="main_content"> <!-- this DIV _should_ stretch to accomodate inner divs -->
      <div id="items_list" class="items_list ui-sortable">
        <div id="item_35" class="item_details">
        </div>
        <div id="item_36" class="item_details">
        </div>        
        <div id="item_37" class="item_details">
        </div>
        <!-- this list of DIVs "item_xx" goes on for a while
             each one representing a photo with name, caption etcetc -->
      </div>
    </div>
    <br class="clear"/>

    <div id="footer">
    </div>
  </body>
</html>

CSS est ceci:

* {
    padding: 0;
    margin: 0;
}

.main {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: #4c5462;
    margin: 0; 
    padding: 0;
    text-align: center; 
    color: #000000;
}
.main #container {
    height: auto;
    width: 46em;
    background: #4c5462;
    margin: 0 auto; 
    border: 0px solid #000000;
    text-align: left;       
}

.main #main_content {
    padding: 5px;
    margin: 0px;
}
#items_list {
    width: 400px;
    float: left;
}

.items_list {
    width: 400px;
    float: left;
}
.item_details {
    margin-top: 3px;
    margin-bottom: 3px;
    padding: 3px;
    float: left;
    border-bottom: 0.5px solid blue;
}

Le problème que j'ai, c’est que #main_content ne s’étire pas pour accueillir tous les divs, ce qui les empêche de continuer.

Comment puis-je résoudre ça?

cssheight
344
patrick

Vous devez forcer un clear:both avant la fermeture du #main_content div. Je déplacerais probablement le <br class="clear" />; dans le #main_content div et définirais le CSS comme suit:

.clear { clear: both; }

Update: Cette question génère encore beaucoup de trafic. Je souhaitais donc mettre à jour la réponse avec une alternative moderne en utilisant un nouveau mode de présentation dans CSS3 appelé Flexible boxes ou Flexbox : 

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;
}
<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 prennent actuellement en charge les unités Flexbox et viewport , mais si vous devez conserver la prise en charge des navigateurs plus anciens, assurez-vous de vérifier la compatibilité de la version de votre navigateur.

254
jennyfofenny

Essayez ceci: overflow: auto;

Cela a fonctionné pour mon problème ..

207
sipőcz péter

ajoutez ce qui suit:

overflow:hidden;
height:1%;

à votre div principale. Élimine le besoin du <br /> supplémentaire pour le clear. 

80
Nick

comme une alternative, vous pouvez également essayer cela qui peut être utile dans certaines situations 

display:table;

jsFiddle

56
h0mayun

Je voudrais juste utiliser

height: auto;

dans votre div. Oui, je sais que je suis un peu en retard, mais je me suis dit que cela pourrait aider quelqu'un comme si cela m'aurait été utile si c'était ici.

20
Charles

Ce qui suit devrait fonctionner:

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

Utilisez la balise span avec display:inline-block css qui y est attaché. Vous pouvez ensuite utiliser CSS et le manipuler comme un div de nombreuses façons, mais si vous n'incluez pas width ou height, il se développe et se rétracte en fonction de son contenu.

J'espère que cela pourra aider.

8
dark marc

Ce problème se pose 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 code HTML, ajoutez le .clearfix class à votre div parent. Par exemple:

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

Cela devrait fonctionner toujours. Vous pouvez appeler le nom de la classe sous la forme .group au lieu de .clearfix, car cela rendra le code plus sémantique . Notez qu'il n'est pas nécessaire d'ajouter le point ou même un espace dans la valeur de Content entre la double citation "". En outre, overflow: auto; pourrait résoudre le problème mais cela pose d'autres problèmes, comme l'affichage de la barre de défilement, ce qui n'est pas recommandé.

Source: Blog de Lisa Catalano et Chris Coyier

6
Ifti Mahmud

En règle générale, 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 soit 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 obtenez quelque chose dans votre code HTML tel que:

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

et css

.last_list_item {clear: both; }
6
David Thomas

ajoute une propriété float à la variable #main_content - elle sera ensuite étendue pour contenir son contenu flottant

5
Ray

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

{ position:absolute }

Supprimer si existe et n'en a pas besoin.

4
onalbi

Les éléments flottants n'occupent pas l'espace à l'intérieur de l'élément parent. Comme leur nom l'indique, ils flottent! Ainsi, si une hauteur n’est pas explicitement fournie à un élément dont les éléments enfants sont flottants, l’élément parent semblera rétrécir et semblera ne pas accepter les dimensions de l’élément enfant, même si son overflow:hidden; donné ses enfants ne peut pas apparaître à l’écran. Il y a 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. Utilisez display:inline-block; ou flex-box au lieu de float.

4
Apoorv Srivastava

On dirait que ça marche

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

La taille de l'écran est au minimum et, si le contenu se développe, il s'agrandit.

3
SyntheticMeshwork

Avez-vous essayé la méthode traditionnelle? Indiquer la hauteur du conteneur principal: auto

#container{height:auto}

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

2
Michelle Dimwaite

J'ai ajouté Bootstrap à un projet comportant des balises section que j'avais définies à 100% de la hauteur de l'écran. Cela a bien fonctionné jusqu’à ce que le projet soit réactif, puis j’ai emprunté une partie de la réponse de jennyfofenny afin que l’arrière-plan de ma section corresponde à l’arrière-plan du contenu lorsque la taille de l’écran changeait sur des écrans plus petits.

Ma nouvelle CSS section 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 d'une certaine couleur. En utilisant min-height, si la largeur de la section est réduite à cause d'un écran plus petit, la hauteur de la section sera agrandie, le contenu restera dans la section et votre arrière-plan conservera la couleur souhaitée.

2
Adrian

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

2
ingrid

Je rencontre moi-même ce projet sur un projet - j'avais une table à l'intérieur d'une div qui débordait du fond de la div. Aucune des corrections de hauteur que j'ai essayées n'a fonctionné, mais j'ai trouvé une solution étrange, consistant à placer un paragraphe avec un point au bas de la division. Donnez ensuite un style à la "couleur" du texte et à l’arrière-plan du conteneur. Travaillé soigné comme vous s'il vous plaît et pas de javascript requis. Un espace insécable ne fonctionnera pas - pas plus qu'une image transparente. 

Apparemment, il suffisait de voir qu'il y avait du contenu en dessous du tableau pour pouvoir le contenir. Je me demande si cela fonctionnera pour quelqu'un d'autre.

C'est le genre de chose qui incite les concepteurs à utiliser des dispositions basées sur des tableaux - le temps que j'ai passé à découvrir ces éléments et à les rendre compatibles avec plusieurs navigateurs me rend fou. 

1
Nancy Hastings-Trew

Je l'ai essayé et ça marche

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

Vous pouvez utiliser CSS Grid Layout . Le support est assez large pour le moment: vérifiez-le sur caniuse .

Voici le exemple sur jsfiddle. Aussi exemple avec des tonnes de texte.

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
0
Sharikov Vladislav

Si vous utilisez jQuery UI, ils ont déjà une classe qui fonctionne, mais un charme Ajoutez un <div> au bas de la div que vous souhaitez développer avec height:auto; Puis ajoutez un nom de classe ui-helper-clearfix ou utilisez cet attribut de style et ajouter comme ci-dessous:

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

ajoutez la classe jQuery UI à la division claire, pas à la division que vous souhaitez développer.

0
Lucas M. Oliveira

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

J'ai créé un violon basé sur le code affiché par l'OP ici: http://jsfiddle.net/U5x4T/1/ , au fur et à mesure que vous supprimez et ajoutez des divs à l'intérieur, vous remarquerez comment le conteneur se développe ou se réduit.

Les deux seules choses dont vous avez besoin pour y parvenir, en plus du code OP, sont les suivantes:

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

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

0
Juan Carlos Alpizar Chinchilla

Moyen très simple

Sur le parent DIV:

height: 100%;

Ce travail pour moi à chaque fois

0
Daniel Beltrami

Ajout de l'affichage: inline à la div et il a augmenté automatiquement (pas le contenu de défilement) lorsque le contenu de hauteur est devenu plus grand que la hauteur de div définie de 200px 

0
Jelle