Extension d'un parent <div> à la hauteur de ses enfants

308

J'ai une structure de page similaire à celle-ci:

<body>
  <div id="parent">
    <div id="childRightCol">
      /*Content*/
    </div>
    <div id="childLeftCol">
      /*Content*/
    </div>
  </div>
</body>

Je voudrais que le parent divse développe heightlorsque l div' intérieur heightaugmente.

Edit:
Un problème est que si le widthcontenu enfant s'étend au-delà widthde la fenêtre du navigateur, mon CSS actuel place une barre de défilement horizontale sur le parent div. Je voudrais que la barre de défilement soit au niveau de la page. Actuellement, ma div parent est définie suroverflow: auto;

Pouvez-vous s'il vous plaît m'aider avec le CSS pour cela?

html  css 
— Steve Horn
source
6
Faites-vous flotter les div internes? Pouvez-vous publier le CSS actuel?
— Eric
2
@Eric - c'était aussi mon problème - mes enfants div avaient flotté: à gauche, quand je l'ai enlevé, «parent» était automatiquement reconnu et étiré à pleine hauteur!
— Michael Goltsman

Réponses:

539

Essayez ceci pour le parent, cela a fonctionné pour moi.

overflow:auto;

METTRE À JOUR:

Une autre solution qui a fonctionné:

Parent :

display: table;

Enfant :

display: table-row;
— Dr Casper Black
source
67
overflow:autosignifie que le navigateur doit décider de la valeur à appliquer. Ce qui fait vraiment l'affaire, c'est overflow: overlay.
— Alba Mendez
14
@jmendeth Une valeur de débordement appelée "superposition" n'existe pas. Ce qui fonctionne si les divs enfants flottent, c'est la déclaration overflow:hidden.
— Christoph
16
Waaaait. Se détendre. Une chose prétend overlayne pas être prise en charge en dehors de Webkit. Un autre complètement différent est de dire qu'il n'existe pas du tout. S'il vous plaît, RTFM d'abord . ;)
— Alba Mendez
6
Si ce n'est que sur Webkit, il n'existe que 20%: P Bravo pour le lien, jamais vu ce site auparavant. Est-il bien entretenu et mis à jour? Le jurez-vous?
— pilau
20
Une autre réponse est stackoverflow.com/questions/450903/… et il propose de définir display:inline-block. Ce qui a très bien fonctionné pour moi.
— Jens
26

ajouter un clear:both. en supposant que vos colonnes flottent. Selon la façon dont votre taille est spécifiée, vous pourriez avoir besoin d'un débordement: auto;

<body>
<div id="parent">
    <div id="childRightCol">
    <div>
    <div id="childLeftCol">
    <div>
    <div id="clear" style="clear:both;"></div>
</div>
</body>
— bendewey
source
Cela me donne une barre de défilement horizontale sur la div parent lorsque le contenu est plus large que la fenêtre du navigateur. J'aimerais que le défilement horizontal soit sur toute la page.
— Steve Horn
1
Pourquoi avez-vous besoin du débordement: auto ;? Dans mon test, le clair: les deux; suffisait.
— Paolo Bergantino
3
Cela suppose également que le parent n'a pas de hauteur spécifiée.
— bendewey
Cette approche fonctionne bien dans Firefox, mais ne fonctionne pas dans IE 6. Des solutions de contournement?
— Steve Horn
4

Pour ceux qui ne peuvent pas comprendre cela dans les instructions de cette réponse :

Essayez de mettre padding valeur plus alors 0 , si divs enfants ont la marge supérieure ou la marge inférieure , vous pouvez le remplacer par un rembourrage

Par exemple, si vous avez

#childRightCol
{
    margin-top: 30px;
}
#childLeftCol
{
    margin-bottom: 20px;
}

il vaudra mieux le remplacer par:

#parent
{
    padding: 30px 0px 20px 0px;
}
— imy
source
4

Utiliser quelque chose comme l'auto-compensation divest parfait pour une situation comme celle-ci . Ensuite, vous allez simplement utiliser une classe sur le parent ... comme:

<div id="parent" class="clearfix">
— Tim Knight
source
3

Ajouter 

clear:both;

Pour le CSS du div parent, ou ajoutez un div au bas du div parent qui efface: les deux;

C'est la bonne réponse, car débordement: auto; peut fonctionner pour des mises en page Web simples, mais gâchera avec des éléments qui commencent à utiliser des choses comme la marge négative, etc.

— Marketing Internet Boise
source
2

Est-ce que cela fait ce que vous voulez?

.childRightCol, .childLeftCol
{
    display: inline-block;
    width: 50%;
    margin: 0;
    padding: 0;
    vertical-align: top;
}
— Eric
source
1

J'ai fait un div parent étendre autour du contenu d'un div enfant en ayant le div enfant comme une seule colonne qui n'a aucun attribut de positionnement tel que absolu spécifié.

Exemple:

#wrap {width:400px;padding:10px 200px 10px 200px;position:relative;margin:0px auto;}
#maincolumn {width:400px;}

En se basant sur la division principale qui est la division enfant la plus profonde de #wrap, cela définit la profondeur de la division #wrap et le remplissage de 200 pixels de chaque côté crée deux grandes colonnes vides pour que vous puissiez placer des divisions absolument positionnées à votre guise. Vous pouvez même changer le rembourrage en haut et en bas pour placer les divs d'en-tête et les divs de pied de page en utilisant position: absolue.

— Ian
source
0

Vous devez appliquer la solution clearfix sur le conteneur parent. Voici un bel article expliquant le lien de correction

— Nikhil
source
0

Si votre contenu dans #childRightCol et #childRightCol est flottant à gauche ou à droite, ajoutez simplement ceci dans css:

#childRightCol:before { display: table; content: " "; }
#childRightCol:after { display: table; content: " "; clear: both; }
#childLeftCol:before { display: table; content: " "; }
#childLeftCol:after { display: table; content: " "; clear: both; }
— user3436572
source
0

Cela fonctionne comme décrit par la spécification - plusieurs réponses ici sont valides et cohérentes avec les suivantes:

S'il a des enfants au niveau du bloc, la hauteur est la distance entre le bord supérieur de la boîte enfant au niveau du bloc le plus haut qui n'a pas de marges réduites à travers elle et le bord inférieur de la boîte enfant au niveau du bloc le plus bas qui n'a pas de marges effondrées. Cependant, si l'élément a un remplissage supérieur et / ou une bordure supérieure non nul, ou est l'élément racine, le contenu commence au bord supérieur de l'enfant le plus haut. (Le premier cas exprime le fait que les marges supérieure et inférieure de l'élément s'effondrent avec celles des enfants les plus hauts et les plus bas, tandis que dans le second cas, la présence du rembourrage / de la bordure empêche les marges supérieures de s'effondrer.) De même, si le L'élément a un remplissage inférieur et / ou une bordure inférieure différents de zéro, puis le contenu se termine au bord inférieur de la marge de l'enfant le plus bas.

à partir d'ici: https://www.w3.org/TR/css3-box/#blockwidth

— Adam Tolley
source
0

Le code ci-dessous a fonctionné pour moi.

css

.parent{
    overflow: auto;
}

html

<div class="parent">
    <div class="child1">
    </div>
    <div class="child2">
    </div>
    <div id="clear" style="clear:both;"></div>
</div>
— anjaneyulubatta505
source
0

D'où nous partons

Voici du HTML et du CSS standard. Dans notre exemple, nous avons un élément parent avec deux éléments enfants flottants.

/* The CSS you're starting with may look similar to this.
 * This doesn't solve our problem yet, but we'll get there shortly.
 */

.containing-div {
  background-color: #d2b48c;
  display: block;
  height: auto;
}

.floating-div {
  float: left;
  width: 50%;
}

.floating-div ul {
  display: inline-block;
  height: auto;
}
<!-- The HTML you're starting with might look similar to this -->
<div class="containing-div">
  <div class="floating-div">
    <ul>
      <li>List Item One</li>
      <li>List Item Two</li>
      <li>List Item Three</li>
      <li>List Item Four</li>
    </ul>
  </div>
  <div class="floating-div">
    <ul>
      <li>List Item Five</li>
      <li>List Item Six</li>
      <li>List Item Seven</li>
      <li>List Item Eight</li>
    </ul>
  </div>
</div>
Développer l'extrait

Solution # 1: débordement: auto

Une solution qui fonctionne dans tous les navigateurs modernes et dans Internet Explorer vers IE8 consiste à ajouter overflow: autoà l'élément parent. Cela fonctionne également dans IE7, avec des barres de défilement ajoutées.

/* Our Modified CSS.
 * This is one way we can solve our problem.
 */

.containing-div {
  background-color: #d2b48c;
  display: block;
  height: auto;
  overflow: auto;
  /*This is what we added!*/
}

.floating-div {
  float: left;
  width: 50%;
}

.floating-div ul {
  display: inline-block;
  height: auto;
}
Développer l'extrait

Solution n ° 2: conteneur parent flottant

Une autre solution qui fonctionne dans tous les navigateurs modernes et revient à IE7 consiste à faire flotter le conteneur parent.

Cela peut ne pas toujours être pratique, car flotter votre div parent peut affecter d'autres parties de la mise en page.

/* Modified CSS #2.
 * Floating parent div.
 */

.containing-div {
  background-color: #d2b48c;
  display: block;
  float: left;
  /*Added*/
  height: auto;
  width: 100%;
  /*Added*/
}

.floating-div {
  float: left;
  width: 50%;
}

.floating-div ul {
  display: inline-block;
  height: auto;
}
Développer l'extrait

Méthode n ° 3: Ajouter une division de compensation sous les éléments flottants

/* 
 * CSS to Solution #3.
 */

.containing-div {
  background-color: #d2b48c;
  display: block;
  height: auto;
}

.floating-div {
  float: left;
  width: 50%;
}

.floating-div ul {
  display: inline-block;
  height: auto;
}


/*Added*/

.clear {
  clear: both;
}
<!-- Solution 3, Add a clearing div to bottom of parent element -->
<div class="containing-div">
  <div class="floating-div">
    <ul>
      <li>List Item One</li>
      <li>List Item Two</li>
      <li>List Item Three</li>
      <li>List Item Four</li>
    </ul>
  </div>
  <div class="floating-div">
    <ul>
      <li>List Item Five</li>
      <li>List Item Six</li>
      <li>List Item Seven</li>
      <li>List Item Eight</li>
    </ul>
  </div>
  <div class="clear"></div>
</div>
Développer l'extrait

Méthode n ° 4: ajouter la division de suppression à l'élément parent Cette solution est assez à l'épreuve des balles pour les navigateurs plus anciens et les navigateurs plus récents.

/* 
 * CSS to Solution #4.
 */

.containing-div {
  background-color: #d2b48c;
  display: block;
  height: auto;
}

.floating-div {
  float: left;
  width: 50%;
}

.floating-div ul {
  display: inline-block;
  height: auto;
}


/*Added*/

.clearfix {
  clear: both;
}

.clearfix:after {
  clear: both;
  content: "";
  display: table;
}
<!-- Solution 4, make parent element self-clearing -->
<div class="containing-div clearfix">
  <div class="floating-div">
    <ul>
      <li>List Item One</li>
      <li>List Item Two</li>
      <li>List Item Three</li>
      <li>List Item Four</li>
    </ul>
  </div>
  <div class="floating-div">
    <ul>
      <li>List Item Five</li>
      <li>List Item Six</li>
      <li>List Item Seven</li>
      <li>List Item Eight</li>
    </ul>
  </div>
</div>
Développer l'extrait

depuis https://www.lockedownseo.com/parent-div-100-height-child-floated-elements/

— jafar690
source
-1

J'utilise ce CSS pour parent et cela fonctionne:

min-height:350px;
background:url(../images/inner/details_middle.gif) repeat-y 0 0 ;
padding:5px 10px;   
text-align:right;
overflow: hidden;
position: relative;
width: 100%;
— pejman
source
2
Vous utilisez min-height, donc ne compte pas;)
— pilau
-1 

#parent{
  background-color:green;
  height:auto;
  width:300px;
  overflow:hidden;
}

#childRightCol{
  color:gray;
  background-color:yellow;
  margin:10px;
  padding:10px;
}
<div id="parent">
    <div id="childRightCol">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vulputate sit amet neque ac consequat.
        </p>
    </div>
  </div>
Développer l'extrait

vous gérez en utilisant la overflow:hidden;propriété dans css

— chintan kotadiya
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.