Comment puis-je étendre la hauteur de la div enfant flottante à la hauteur du parent ?

Question

La structure de ma page est la suivante :

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

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

Maintenant, le child-left Le DIV aura plus de contenu, donc le parent La hauteur du DIV augmente en fonction du DIV enfant.

Mais le problème est child-right La hauteur n'augmente pas. Comment puis-je faire en sorte que sa hauteur soit égale à celle de son parent ?

Answer 1

Pour le 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 même hauteur ici .

Answer 2

Une solution courante à ce problème consiste à utiliser un positionnement absolu ou des flotteurs rognés, mais ces solutions sont délicates, car elles nécessitent un réglage approfondi si le nombre et la taille de vos colonnes changent, et vous devez vous assurer que votre colonne "principale" est toujours la plus longue. Je vous suggère plutôt d'utiliser l'une des trois solutions plus robustes :

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

1. display:flex

C'est vraiment simple, et il est facile de s'adapter à des mises en page plus complexes ou plus détaillées - mais flexbox n'est pris en charge que par IE10 ou plus (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 pour avoir simplement un nombre quelconque de colonnes, ce qui précède suffit !

2. <table> ou display: table

Une façon simple et extrêmement compatible de le faire est d'utiliser un fichier de type table - Je vous recommande d'essayer d'abord cela si vous avez besoin d'un support pour les anciennes technologies. . Vous avez affaire à des colonnes ; les divs + les flottants ne sont tout simplement pas la meilleure façon de procéder (sans parler du fait que de multiples niveaux de divs imbriqués juste pour contourner les limitations css ne sont guère plus "sémantiques" que l'utilisation d'un simple tableau). Si vous ne souhaitez pas utiliser l'option table élément, considérer le 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 un simple <table> à la place)

<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-échelle si vous le souhaitez ; et vous conservez la compatibilité avec les anciens navigateurs. Contrairement à la solution flottante, vous n'avez pas non plus besoin de savoir à l'avance quelle colonne est la plus longue ; la hauteur s'adapte parfaitement.

KISS : n'utilisez pas les hacks de flottaison à moins que vous n'en ayez spécifiquement besoin. Si IE7 est un problème, je choisirais toujours un simple tableau avec des colonnes sémantiques plutôt qu'une solution CSS bidon difficile à maintenir et moins flexible.

À propos, si vous avez besoin que votre mise en page soit réactive (par exemple, pas de colonnes sur les petits téléphones portables), vous pouvez utiliser un fichier de type @media pour revenir à la mise en page en bloc simple pour les petites largeurs d'écran - ceci fonctionne que vous utilisiez <table> ou tout autre display: table élément.

3. display:inline block avec une marge négative.

Une autre alternative est d'utiliser display:inline block .

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

html pertinent : (l'absence d'espaces entre les div les tags sont importants)

<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; 
}

C'est un peu délicat, et la marge négative signifie que le "vrai" fond des colonnes est masqué. Cela signifie que vous ne pouvez pas positionner quoi que ce soit par rapport au bas de ces colonnes, car il est coupé par la marge négative. overflow: hidden . Notez qu'en plus des blocs en ligne, vous pouvez obtenir un effet similaire avec des flottants.

---

TL;DR : utilisation flexbox si vous pouvez ignorer IE9 et les versions antérieures ; sinon, essayez un tableau (css). Si aucune de ces options ne vous convient, il existe des astuces de marge négative, mais elles peuvent causer des problèmes d'affichage bizarres qui sont faciles à manquer pendant le développement, et il y a des limitations de mise en page dont vous devez être conscient.

Answer 3

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

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

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

Answer 4

Veuillez définir la division parent sur overflow: hidden
puis dans les divs enfants, vous pouvez définir une grande quantité de padding-bottom. par exemple
padding-bottom: 5000px
puis margin-bottom: -5000px
et toutes les divisions enfant auront la même hauteur que le parent.
Bien sûr, cela ne fonctionnera pas si vous essayez de placer du contenu dans la division parent (en dehors des autres divisions).

.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/

Answer 5

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

div.parent { height: 300px };

Ensuite, vous pouvez faire en sorte que l'enfant s'étire à toute sa hauteur comme ceci.

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

EDIT

Voici comment vous pouvez le faire en utilisant JavaScript.