web-dev-qa-db-fra.com

Comment faire flotter un élément à gauche sur toute la hauteur du wrapper?

HTML:

<div class="wrapper">
    <div class="left">
        Foo
    </div>
    <div class="right">
        Text row 1
    </div>
</div>

<div class="wrapper">
    <div class="left">
        Foo Bar
    </div>
    <div class="right">
        Text row 1<br>
        Text row 2<br>
        Text row 3
    </div>
</div>

CSS:

.wrapper {
    overflow:hidden;
}

.left {
    width:80px;
    float:left;
    height:100%;
}

Comment puis-je donner au div flottant toute la hauteur de l'enveloppe (dont la hauteur varie)?

est-ce possible sans jQuery?

Test: http://jsfiddle.net/Q6B43/

csscss-floatfloating
27
Martin

Le display: table Solution

Dans les tableaux, chaque cellule d'une ligne a la même hauteur.

.wrapper {
    display: table;
    width: 100%;
}
.left, .right {
    display: table-cell;
}

C'est la meilleure solution à mon avis, mais c'est non compatible avant IE8 .

Voici le Fiddle pour cette solution.

Utiliser un positionnement absolu

Les éléments positionnés absolus respectent leurs parents relatifs height:

.wrapper {
    position: relative;
    padding-left: 85px;
}
.left {
    position: absolute;
    left: 0;
    top: 0;
}

Normalement, je ne recommanderais pas un positionnement absolu dans la plupart des situations. Mais comme vous avez un width fixe de toute façon, peut-être cela n'a pas d'importance. Mais sachez que cela ignorera les longs contenus dans .left. La hauteur est juste contrôlée par .right.

Voici une mise à jour de votre violon .

La solution flexible

C'est tellement nouveau que je ne recommanderais pas de l'utiliser maintenant, mais juste pour être complet. Vous pouvez utiliser CSS3 flex , mais soyez conscient de compatibilité du navigateur :

.wrapper {
    display: flex;
}

Fiddle (testé dans la version actuelle Chrome et Firefox).

La disposition grid

Encore plus récent que flexbox, CSS grid semble être la réponse parfaite aux questions de mise en page.

.wrapper {
    display: grid;
    grid-template-areas: 'left right';
}

.left {
    grid-area: left;
}

.right {
    grid-area: right;
}

Compatibilité du navigateur est rare, si vous revenez à une vue des versions. En outre, ce serait exagéré pour le scénario de l'OP à mon avis, mais pour les problèmes de mise en page plus complexes à l'avenir, c'est une chose très puissante.

Voyez-le dans le Fiddle .

54
Linus Caldwell