faire grandir la hauteur de div avec son contenu

376

J'ai ces divs imbriqués et j'ai besoin que le conteneur principal se dilate (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 accommodate 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 la suivante:

* {
    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 qu'il #main_contentne s'étire pas pour accueillir toutes les divisions internes, avec pour résultat qu'elles continuent à aller à l'arrière-plan.

Comment puis-je résoudre ce problème en considérant le scénario ci-dessus?

css height

— patrick
source

5

Les gars merci à tous pour les réponses! la meilleure solution pour mon cas spécifique était de coder en dur un BR pour effacer les deux côtés (merci Jennyfofenny et aussi Ricebowl). réduit la largeur de cette division à la taille des divisions enfant). Maintenant que je suis novice, je me demande: ces solutions ont-elles des inconvénients ou je peux les utiliser indifféremment? (par exemple. peut-être que l'un d'eux ne fonctionne pas avec IE6, ou similaire ...)

— patrick

1

@Patrick, si vous souhaitez développer davantage votre question, cliquez sur le lien «modifier» (sous le texte actuel de la question) et ajoutez les autres questions. La convention suggère d'utiliser quelque chose comme <strong>Edited</strong>$Reason_for_revising_question...Vous devrez peut-être changer le titre de la question pour refléter les changements s'il y a un changement majeur ou un ajout dans son objectif. =)

— David dit de réintégrer Monica

4

Vous n'avez également jamais fermé le divtag avec id='container'. Cela pourrait causer des problèmes.

— Batkins

@patrick, vous n'avez pas non plus le CSS pour la .clearclasse. L'avez-vous oublié ou est-ce dans votre code d'origine? La .clearclasse à ce sujet brest très importante, comme @jennyfofenny le mentionne dans sa réponse.

— Cannicide le

281

Vous devez forcer un clear:bothavant que le #main_contentdiv ne soit fermé. Je déplacerais probablement le <br class="clear" />;dans le #main_contentdiv et définirais le CSS comme:

.clear { clear: both; }

Mise à jour: Cette question reçoit toujours une bonne quantité de trafic, donc je voulais mettre à jour la réponse avec une alternative moderne en utilisant un nouveau mode de mise en page en CSS3 appelé Boîtes flexibles 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>

Développer l'extrait

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 anciens navigateurs, assurez-vous de vérifier la compatibilité pour la version de navigateur spécifique.

— jennyfofenny
source

4

Voici l'article w3schools sur la propriété CSS clear. Fondamentalement, clear signifie que l'élément auquel le clear est appliqué commence sous les flotteurs dans son flux (soit uniquement à gauche, uniquement à droite ou les deux).

— jennyfofenny

230

Essaye ça: overflow: auto;

Cela a fonctionné pour mon problème ..

— sipőcz péter
source

10

+1, cette solution est élégante et n'ajoute pas de balise invisible à votre page. Voir ce violon: jsfiddle.net/XmKrm/1

— Nabil Kadimi

5

le débordement automatique a bien fonctionné pour moi. Pour info, cela ajoutera une barre de défilement si la hauteur du conteneur automatique de débordement est inférieure au contenu à l'intérieur. Redimensionnez-le aussi ou réglez la hauteur: automatique avec le trop-plein.

— Bryan Myers

@ Roozbeh15 ajouter display: block;avec elle

— BadAtPHP

2

La meilleure et la plus simple solution ... Vous m'avez sauvé la journée. Merci

— Kashyap Kotak

shet sacré cela a fonctionné à merveille. quelqu'un se soucie d'expliquer le mécanisme sous-jacent de pourquoi cela a fonctionné?

— Merkurial

86

ajoutez ce qui suit:

overflow:hidden;
height:1%;

à votre div principale. Élimine le besoin d'extra <br />pour le clair.

— pseudo
source

Hou la la! cela a fait exactement le contraire de ce à quoi je m'attendais! débordement: caché = étendre pour s'adapter au contenu! je n'aurais jamais deviné ça!

— mulllhausen

Oui, cela a fonctionné pour moi aussi et cela n'a aucun sens pourquoi. Une explication pourquoi le «hauteur 1%» et le «débordement caché» fonctionnent?

— acarlon

1

vraiment comment ça marche et même pourquoi ça marche, si aucune hauteur n'est définie pourquoi le débordement caché non seulement cache tout (la hauteur cos est 0) mais se dilate, y a-t-il une explication ou simplement croire et être heureux?

— Max Yari

1

débordement: caché cache les barres de défilement mais conserve la taille du bloc

— authentictech

a fonctionné pour moi avec juste 'overflow: hidden' mais 'overflow: auto' a également fonctionné et n'affichait pas les barres de défilement.

— Whirlwind991

60

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

display:table;

jsFiddle

— h0mayun
source

24

Je voudrais juste utiliser

height: auto;

dans votre div. Oui, je sais que je suis un peu en retard, mais je pensais que cela pourrait aider quelqu'un comme cela m'aurait aidé s'il était ici.

— Charles
source

height: auto;entraîne le déplacement de tous les éléments ci-dessous vers le haut. Avec cette propriété sur ma div de contenu principale, le pied de page de ma page se déplace vers le haut afin qu'il touche l'en-tête et chevauche ma div de contenu.

— Aaron Franke

1

C'était la solution pour moi. Merci!

— Nik Hammer-Ellis

14

Les éléments suivants devraient fonctionner:

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

— Steerpike
source

ajout de débordement: fonction automatique, bien que si j'ajoute également une largeur: 100%, cela fait que le div (#main_content) est légèrement plus grand que son div parent. Je n'ai pas compris pourquoi!

— Patrick

2

c'est parce que le rembourrage compte en plus de la largeur spécifiée, donc la largeur de votre élément est de 100% + 5px rembourrage gauche + 5px rembourrage droit

— NickV

1

débordement: auto; travaillé pour moi, merci beaucoup veddy.

— Cosco Tech

9

Manière très simple

Sur le parent DIV:

height: 100%;

Ce travail pour moi à chaque fois

— Daniel Beltrami
source

8

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

J'espère que cela pourra aider.

— marc foncé
source

Votre espoir a fonctionné: cela m'a au moins aidé! :) Btw, j'ai laissé mon élément en tant que div(au lieu d'un span) mais display: inline-blockj'ai quand même travaillé dans mon cas (Chrome).

— snapfractalpop

6

En règle générale, je pense que cela peut être résolu en forçant une clear:bothrègle 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 la boucle qui crée 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; }

— David dit de réintégrer Monica
source

6

Ce problème se produit lorsque les éléments enfants d'une division parent flottent. 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 code HTML, ajoutez la classe .clearfix à votre div parent. Par exemple:

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

Cela devrait toujours fonctionner. Vous pouvez appeler le nom de classe en tant que .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 Contenu entre les doubles guillemets "". Aussi, débordement: auto; peut résoudre le problème, mais cela provoque 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

— Ifti Mahmud
source

5

ajouter une propriété float à la #main_contentdiv - elle se développera ensuite pour contenir son contenu flottant

— Rayon
source

Merci Ray, cela a fonctionné bien qu'il ait réduit le div à la taille de son contenu (#items_list) qui a une largeur: 400 px; Votre solution serait vraiment bonne si je pouvais faire en sorte que #main_content reste à sa pleine largeur - des suggestions?

— Patrick

@Ray 2 et quelques années plus tard, cela m'a juste évité un mal de tête potentiel avec un problème similaire. Je vous remercie!

— John H

4

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

{ position:absolute }

Supprimez s'il en existe et n'en avez pas besoin.

— onalbi
source

2

Parce que "les éléments positionnés en absolu sont supprimés du flux, donc ignorés par les autres éléments. Vous ne pouvez donc pas définir la hauteur des parents en fonction d'un élément positionné en absolu". stackoverflow.com/questions/12070759/…

— Federico

4

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 ayant ses éléments enfants flottants, alors l'élément parent semblera rétrécir et sembler ne pas accepter les dimensions de l'élément enfant, même si ses données overflow:hidden;peuvent ne pas apparaître à l'écran. Il existe plusieurs façons de résoudre ce problème:

Insérer un autre élément sous l'élément taloché avec la clear:both;propriété ou l' utilisation clear:both;sur :afterde l'élément flottant.
Utilisez display:inline-block;ou flex-boxau lieu de float.

— Apoorv Srivastava
source

3

On dirait que ça marche

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

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

— SubstanceMX
source

2

En CSS: #clear_div{clear:both;}

Après la balise div du div intérieur, ajoutez ce nouveau div suivant

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

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

— ingrid
source

2

J'ai ajouté Bootstrap à un projet avec des sectionbalises que j'avais définies à 100% de la hauteur de l'écran. Il a bien fonctionné jusqu'à ce que je fait le projet sensible, à quel point j'emprunté une partie de jennyfofenny « s réponse donc mon arrière-plan de section correspondait à l'arrière-plan du contenu lorsque la taille de l'écran changeait sur des écrans plus petits.

Mon nouveau sectionCSS 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 diminue 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 souhaitée.

— Adrian
source

2

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

#container{height:auto}

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

— Michelle Dimwaite
source

1

J'exécute moi-même un projet - j'avais une table à l'intérieur d'une div qui débordait du fond de la div. Aucun des correctifs de hauteur que j'ai essayés n'a fonctionné, mais j'ai trouvé un correctif étrange pour cela, et c'est de mettre un paragraphe au bas de la div avec juste une période. Donnez ensuite un style à la "couleur" du texte pour qu'elle soit identique à l'arrière-plan du conteneur. A fonctionné à 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 avait du contenu sous le tableau afin de l'é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 tableaux - le temps que j'ai passé à comprendre ces choses et à les rendre compatibles avec plusieurs navigateurs me rend fou.

— Nancy Hastings-Trew
source

Ça doit être un moyen de le faire avec CSS, mais je n'ai aucune idée de ce que ce serait. Cela a fonctionné pour moi, mais j'ai dû ajouter de la largeur: 100%; hauteur: auto; hauteur min: 100%; position: relative;

— RationalRabbit

1

je l'ai essayé et ça marche

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

— Ahmed Aboelela
source

0

Si vous utilisez jQuery UI, ils ont déjà une classe qui fonctionne juste un charme ajoutez un <div>en bas à l'intérieur du 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 ajoutez 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.

— Lucas M. Oliveira
source

0

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

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

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

* Débordement dans le conteneur principal (requis pour les div flottants)

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

— Juan Carlos Alpizar Chinchilla
source

0

Affichage ajouté: en ligne avec le div et il est devenu automatique (pas les éléments de défilement) lorsque le contenu de la hauteur est devenu plus grand que la hauteur de div définie de 200px

— Jelle
source

1

Ce n'est pas une réponse claire à la question. Pour les remarques, veuillez utiliser la fonction de commentaire.

— ksbg

0

Vous pouvez utiliser la disposition de grille CSS . Le support est assez large pour le moment: vérifiez-le sur caniuse .

Voici l' exemple sur jsfiddle. Exemple également 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

— Sharikov Vladislav
source

0

J'ai essayé à peu près toutes les suggestions énumérées ci-dessus et aucune n'a fonctionné. Cependant, "display: table" a fait l'affaire pour moi.

— PongGod
source

-1

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

class="container"

pour le div qui doit être rempli.

Vous pouvez obtenir le bootstrap d'ici

— Thadeo Arlo
source