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

Question

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

Demandé el 21 de Décembre, 2008: Quand la question a-t-elle été
98345 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

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>

J'aimerais que le parent div de s'étendre en height lorsque l'intérieur div 's height augmente.

Edita:
L'un des problèmes est que si le width du contenu de l'enfant s'étend au-delà de la width de la fenêtre du navigateur, mon CSS actuel place une barre de défilement horizontale sur la fenêtre parentale. div . Je voudrais que la barre de défilement soit au niveau de la page. Actuellement, ma div parent est réglée sur overflow: auto;

Pouvez-vous m'aider avec le CSS pour cela ?

Demandé el 21 de Décembre, 2008 par Steve Horn

7 votes

Les divs intérieures sont-elles flottantes ? Pouvez-vous afficher le CSS actuel ?

Commenté el 5 de Juin, 2010 par Eric

2 votes

@Eric - c'était mon problème aussi - mes div(s) enfant(s) avaient float:left, quand je l'ai enlevé le 'parent' a été automatiquement reconnu et étiré à la pleine hauteur !

Commenté el 27 de Mars, 2016 par Mishanya

Answer 1

5 Réponses

Answer 2

620voto

Dr Casper Black Points 2242

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

overflow:auto;

UPDATE :

Une autre solution qui a fonctionné :

Parent :

display: table;

Enfant :

display: table-row;

Répondu el 2 de Janvier, 2011 par Dr Casper Black (2242 Points )

76 votes

overflow:auto signifie que le navigateur doit décider de la valeur à appliquer. Ce qui est vraiment fait l'astuce consiste à overflow: overlay .

Commenté el 30 de Juillet, 2011 par jmendeth

16 votes

@jmendeth Une valeur de débordement appelée "overlay" n'existe pas. Ce qui fonctionne si les divs enfants sont flottantes, c'est de déclarer overflow:hidden .

Commenté el 11 de Juillet, 2012 par Christoph

17 votes

Waaaait. Détendez-vous. Une chose est certaine overlay n'est pas pris en charge en dehors de Webkit. Une autre façon de dire qu'il n'existe pas du tout est complètement différente. S'il vous plaît, RTFM d'abord . ;)

Commenté el 11 de Juillet, 2012 par jmendeth

Afficher 2 autres commentaires

Answer 3

27voto

bendewey Points 25437

Ajouter un clear:both . en supposant que vos colonnes soient flottantes. Selon la façon dont la hauteur est spécifiée par le parent, vous pouvez avoir besoin d'un overflow:auto ;

<body>
<div id="parent">
    <div id="childRightCol">
    <div>
    <div id="childLeftCol">
    <div>
    <div id="clear" style="clear:both;"></div>
</div>
</body>

Répondu el 21 de Décembre, 2008 par bendewey (25437 Points )

0 votes

Cela me permet d'obtenir une barre de défilement horizontale sur la div parente lorsque le contenu est plus large que la fenêtre du navigateur. J'aimerais que le défilement horizontal se fasse sur l'ensemble de la page.

Commenté el 21 de Décembre, 2008 par Steve Horn

1 votes

Pourquoi avez-vous besoin de l'option overflow:auto; ? Dans mon test, le clear:both ; suffisait.

Commenté el 21 de Décembre, 2008 par Paolo Bergantino

3 votes

Cela suppose également que le parent n'a pas de hauteur spécifiée.

Commenté el 21 de Décembre, 2008 par bendewey

Afficher 2 autres commentaires

Answer 4

19voto

noisy Points 538

Comme le dit Jens dans son commentaire

Une autre réponse est Comment faire en sorte que la div ne soit pas plus grande que son contenu ? propose de définir display:inline-block. Ce qui a très bien fonctionné pour moi. - Jens le 2 juin à 5:41

Cela fonctionne beaucoup mieux pour moi dans tous les navigateurs.

Répondu el 11 de Octobre, 2013 par noisy (538 Points )

Answer 5

4voto

imy Points 106

Pour ceux qui ne parviennent pas à comprendre ce qui suit dans les instructions de cette réponse là :

Essayez de définir rembourrage valeur plus entonces 0 Si les divs enfants ont un margin-top ou un margin-bottom, vous pouvez le remplacer par un padding.

Par exemple, si vous avez

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

il sera préférable de le remplacer par.. :

#parent
{
    padding: 30px 0px 20px 0px;
}

Répondu el 16 de Juin, 2010 par imy (106 Points )

Answer 6

3voto

Tim K. Points 5090

L'utilisation de quelque chose comme l'auto-défense div est parfait pour une situation telle que cette . Il suffit alors d'utiliser une classe sur le parent... comme :

<div id="parent" class="clearfix">

Répondu el 21 de Décembre, 2008 par Tim K. (5090 Points )

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

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

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

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: