css - tecnicas - ¿Cómo flotar un elemento dejado con la altura completa de la envoltura?

como flotar en el agua verticalmente

Question

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

¿Cómo puedo darle a la división flotante la altura completa de la envoltura (cuya altura varía)?

¿Es posible sin jQuery?

Prueba: http://jsfiddle.net/Q6B43/

Answer 1

La display: table solución de display: table

Dentro de las tablas, cada celda de una fila tiene la misma altura.

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

Esta es la mejor solución en mi opinión, pero no es compatible antes de IE8 .

Aquí está el Fiddle para esta solución.

Utilizando posicionamiento absoluto

Los elementos posicionados absolutos respetan la height relativa de sus padres:

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

Normalmente no recomendaría el posicionamiento absoluto en la mayoría de las situaciones. Pero como usted tiene un width fijo de todos modos, tal vez no importa. Pero tenga en cuenta el hecho de que esto ignorará los contenidos largos en .left . La altura solo es controlada por .right

Aquí hay una actualización de su violín .

La solución flex .

Esto es tan nuevo que no recomendaría usarlo ahora, pero solo para completar. Podría usar CSS3 flex , pero tenga en cuenta la compatibilidad del navegador :

.wrapper {
    display: flex;
}

El Fiddle (probado en Chrome actual y Firefox).

El diseño de la grid

Incluso más reciente que flexbox, la grid CSS se convierte en la respuesta perfecta para las preguntas de diseño.

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

.left {
    grid-area: left;
}

.right {
    grid-area: right;
}

La compatibilidad del navegador es poco frecuente, si vuelve a las versiones de vista. Además, en mi opinión, sería una exageración para el escenario del OP, pero para problemas de diseño más complejos en el futuro, esto es algo muy poderoso.

Véalo en el Fiddle .

Answer 2

Añadir:

body, html { height:100% }

Y dale a tu envoltorio una altura fija en píxeles.