web-dev-qa-db-fra.com

CSS - Augmenter la taille de DIV enfant flottant à la hauteur du parent

J'ai la structure de la page en tant que:

<div class="parent">
    <div class="child-left floatLeft">
    </div>

    <div class="child-right floatLeft">
    </div>
</div>

Maintenant, le child-left DIV aura plus de contenu, donc la hauteur de la parent DIV augmente conformément à la DIV enfant.

Mais le problème est child-right la hauteur n'augmente pas. Comment puis-je rendre sa hauteur égale à celle de son parent?

htmlcsslayout
419
Veera

Pour l'élément parent, ajoutez les propriétés suivantes:

.parent {
    overflow: hidden;
    position: relative;
    width: 100%;
}

alors pour .child-right ceux-ci:

.child-right {
    background:green;
    height: 100%;
    width: 50%;
    position: absolute;
    right: 0;
    top: 0;
}

Trouvez des résultats plus détaillés avec des exemples CSS ici et plus d'informations sur les colonnes de hauteur égale ici .

430
Sotiris

Une solution courante à ce problème utilise le positionnement absolu ou les flottants recadrés, mais ils sont délicats en ce qu'ils nécessitent un réglage important si le nombre et la taille de vos colonnes changent, et que vous devez vous assurer que votre colonne "principale" est toujours la plus longue. Au lieu de cela, je vous suggérerais d'utiliser l'une des trois solutions les plus robustes:

  1. display: flex: de loin la solution la plus simple et la meilleure et très flexible - mais non prise en charge par IE9 et les versions antérieures.
  2. table ou display: table: très simple, très compatible (presque tous les navigateurs), assez flexible.
  3. display: inline-block; width:50% avec un hack de marge négative: assez simple, mais les bordures en bas de colonne sont un peu délicates.

1. display:flex

C’est très simple et il est facile de s’adapter à des dispositions plus complexes ou plus détaillées, mais flexbox n’est pris en charge que par IE10 ou une version ultérieure (en plus des autres navigateurs modernes).

Exemple: http://output.jsbin.com/hetunujuma/1

HTML pertinent: 

<div class="parent"><div>column 1</div><div>column 2</div></div>

css pertinent: 

.parent { display: -ms-flex; display: -webkit-flex; display: flex; }
.parent>div { flex:1; }

Flexbox prend en charge beaucoup plus d’options, mais il suffit d’avoir un nombre quelconque de colonnes, cela suffit!

2 .<table> ou display: table

Une méthode simple et extrêmement compatible consiste à utiliser un table - . Je vous recommande de l'essayer en premier si vous avez besoin du support de l'ancien IE . Vous avez affaire à des colonnes. divs + floats ne sont tout simplement pas le meilleur moyen de le faire (sans oublier le fait que plusieurs niveaux de divs imbriquées, juste pour bidouiller les limitations de CSS, n’est guère plus "sémantique" que de simplement utiliser un simple tableau). Si vous ne souhaitez pas utiliser l'élément table, considérez css display: table (non pris en charge par IE7 et les versions antérieures).

Exemple: http://jsfiddle.net/emn13/7FFp3/ =

html pertinent: (mais envisagez d'utiliser plutôt un simple <table>)

<div class="parent"><div>column 1</div><div>column 2</div></div>

css pertinent: 

.parent { display: table; }
.parent > div {display: table-cell; width:50%; }
/*omit width:50% for auto-scaled column widths*/

Cette approche est beaucoup plus robuste que l’utilisation de overflow:hidden avec des flottants. Vous pouvez ajouter à peu près n'importe quel nombre de colonnes. vous pouvez les avoir auto-scale si vous le souhaitez; et vous conservez la compatibilité avec les anciens navigateurs. Contrairement à la solution float, vous n'avez pas non plus besoin de savoir à l'avance quelle colonne est la plus longue; la hauteur varie très bien.

KISS: n'utilisez pas de hacks flottants sauf si vous en avez la nécessité. Si IE7 pose un problème, je choisirais quand même une table ordinaire avec des colonnes sémantiques sur une solution de CSS artificielle difficile à maintenir et moins flexible.

Soit dit en passant, si votre mise en page doit être réactive (par exemple, pas de colonnes sur les petits téléphones portables), vous pouvez utiliser une requête @media pour revenir à la disposition de bloc simple pour les petites largeurs d'écran - que vous utilisiez <table> ou tout autre élément display: table.

3. display:inline block avec un hack de marge négative.

Une autre alternative consiste à utiliser display:inline block.

Exemple: http://jsbin.com/ovuqes/2/edit

html pertinent: (l'absence d'espaces entre les balises div est significative!)

<div class="parent"><div><div>column 1</div></div><div><div>column 2</div></div></div>

css pertinent: 

.parent { 
    position: relative; width: 100%; white-space: nowrap; overflow: hidden; 
}

.parent>div { 
    display:inline-block; width:50%; white-space:normal; vertical-align:top; 
}

.parent>div>div {
    padding-bottom: 32768px; margin-bottom: -32768px; 
}

Ceci est légèrement délicat et la marge négative signifie que le "vrai" bas des colonnes est masqué. Cela signifie à son tour que vous ne pouvez rien positionner par rapport au bas de ces colonnes car il est coupé par overflow: hidden. Notez qu'en plus des blocs en ligne, vous pouvez obtenir un effet similaire avec les flottants.

TL; DR : utilisez flexbox si vous pouvez ignorer IE9 et les versions antérieures; sinon, essayez une table (css). Si aucune de ces options ne vous convient, il existe des hacks de marges négatives, mais ils peuvent entraîner des problèmes d'affichage étranges qu'il est facile de rater pendant le développement. Vous devez également être conscient des limitations de disposition.

187
Eamon Nerbonne

Pour le parent:

display: flex;

Pour les enfants:

align-items: stretch;

Vous devriez ajouter des préfixes, vérifiez caniuse.

23
Aiphee

J'ai trouvé beaucoup de réponses, mais la meilleure solution pour moi est probablement

.parent { 
  overflow: hidden; 
}
.parent .floatLeft {
  # your other styles
  float: left;
  margin-bottom: -99999px;
  padding-bottom: 99999px;
}

Vous pouvez vérifier d'autres solutions ici http://css-tricks.com/fluid-width-equal-height-columns/

18
Dobromir Minchev

S'il vous plaît définir parent div à overflow: hidden
alors dans les divs enfants, vous pouvez définir une grande quantité pour padding-bottom. par exemple
padding-bottom: 5000px
puis margin-bottom: -5000px
et tous les enfants divs seront à la hauteur du parent.
Bien sûr, cela ne fonctionnera pas si vous essayez de mettre du contenu dans la div parent (en dehors des autres divs)

.parent{
    border: 1px solid black;
    overflow: hidden;
    height: auto;
}
.child{
    float: left;
    padding-bottom: 1500px;
    margin-bottom: -1500px;
}
.child1{
    background: red;
    padding-right: 10px;    
}
.child2{
    background: green;
    padding-left: 10px;
}
<div class="parent">
    <div class="child1 child">
        One line text in child1
    </div>
    <div class="child2 child">
        Three line text in child2<br />
        Three line text in child2<br />
        Three line text in child2
    </div>
</div>

Exemple: http://jsfiddle.net/Tareqdhk/DAFEC/

11
Tareq

Le parent a-t-il une taille? Si vous définissez la taille des parents comme telle.

div.parent { height: 300px };

Ensuite, vous pouvez étirer l’enfant à toute hauteur comme ceci.

div.child-right { height: 100% };

EDIT

Voici comment vous feriez avec JavaScript.

8
Olical

L'affichage de table CSS est idéal pour cela:

.parent {
  display: table;
  width: 100%;
}
.parent > div {
  display: table-cell;
}
.child-left {
  background: powderblue;
}
.child-right {
  background: papayawhip;
}
<div class="parent">
  <div class="child-left">Short</div>
  <div class="child-right">Tall<br>Tall</div>
</div>

Réponse originale (en supposant que toute colonne puisse être plus grande):

Vous essayez de faire en sorte que la taille du parent dépende de la taille de l'enfant et que celle-ci dépende de la taille du parent. Ne calculera pas. Les colonnes CSS Faux sont la meilleure solution. Il y a plus d'une façon de faire ça. Je préférerais ne pas utiliser JavaScript.

5
Salman A

Je l'ai utilisé pour une section de commentaires:

.parent {
    display: flex;
    float: left;
    border-top:2px solid black;
    width:635px;
    margin:10px 0px 0px 0px;
    padding:0px 20px 0px 20px;
    background-color: rgba(255,255,255,0.5);
}
    
.child-left {
        align-items: stretch;
        float: left;
        width:135px;
        padding:10px 10px 10px 0px;
        height:inherit;
        border-right:2px solid black;
}

.child-right {
        align-items: stretch;
        float: left;
        width:468px;
        padding:10px;
}
<div class="parent">
  <div class="child-left">Short</div>
  <div class="child-right">Tall<br>Tall</div>
</div>

Vous pouvez faire flotter l'enfant à droite, mais dans ce cas, j'ai calculé les largeurs de chaque div avec précision.

4
larsgrafik

Je l'ai récemment fait sur mon site Web avec jQuery. Le code calcule la hauteur de la plus haute div et place les autres div à la même hauteur. Voici la technique:

http://www.broken-links.com/2009/01/20/very-quick-equal-height-columns-in-jquery/

Je ne crois pas que height:100% fonctionnera. Par conséquent, si vous ne connaissez pas explicitement les hauteurs des divisions, je ne pense pas qu'il existe une solution CSS pure.

4
ajcw

Si vous connaissez bootstrap, vous pouvez le faire facilement en utilisant la propriété 'flex'. Tout ce que vous avez à faire est de passer les propriétés css au parent parent

.homepageSection {
  overflow: hidden;
  height: auto;
  display: flex;
  flex-flow: row;
}

où .homepageSection est mon div parent. Maintenant, ajoutez enfant div dans votre HTML en tant que

<div class="abc col-md-6">
<div class="abc col-md-6">

où abc est mon div enfant.Vous pouvez vérifier l’égalité de hauteur dans les deux div enfants indépendamment de la frontière en donnant simplement

3
Er.Naved Ali
<div class="parent" style="height:500px;">
<div class="child-left floatLeft" style="height:100%">
</div>

<div class="child-right floatLeft" style="height:100%">
</div>
</div>

J'ai utilisé le style en ligne juste pour donner une idée.

0
suketup