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 dar el div flotante de la altura total del contenedor (cuya altura es variable)?

es posible sin jQuery?

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

InformationsquelleAutor Martin | 2013-04-04

2 Comentarios

  1. 54

    La display: table solución

    Dentro de las tablas de 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 es no es compatible antes de IE8.

    Aquí es el El violín para esta solución.

    Utilizando posicionamiento absoluto

    De los elementos con posición absoluta respecto a su relación padres height:

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

    Normalmente yo no recomendamos posicionamiento absoluto en la mayoría de las situaciones. Pero como fijo width de todos modos, tal vez no importa. Pero hay que ser conscientes del hecho de que de esta forma se ignora mucho contenido en .left. La altura es controlado sólo por .right.

    Aquí es un actualización de su Violín.

    La flexible solución

    Este es tan nueva que yo no recomiendo el uso de ella ahora mismo, pero sólo para estar completa. podría utilizar CSS3 flex, pero ser conscientes de compatibilidad del navegador:

    .wrapper {
        display: flex;
    }

    La El violín (probado en el actual de Chrome y Firefox).

    La grid diseño

    Aún más reciente que flexbox, CSS cuadrícula costuras a ser la respuesta perfecta para el diseño de las preguntas.

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

    Compatibilidad del navegador es raro, si se va a volver una vista de versiones. Además, sería una exageración para el OP del escenario en mi opinión, pero para los más complejos de diseño de problemas en el futuro, esto es algo muy poderoso.

    Ver en la El violín.

    • Sólo porque un elemento tiene un ancho fijo no significa que el posicionamiento absoluto es seguro de usar; es la longitud del elemento que causa problemas.
    • Estoy de acuerdo. Es por eso que he publicado alternativas. Pero en el ejemplo dado, el único problema es el contenido del derecho <div/>. Así que por favor déjame soñar que Martin lo sabe con certeza la izquierda de contenido es una línea en cualquier momento. 😉 En ese caso, sería hacer el trabajo que yo pienso. No es cierto?
    • No me puedo imaginar muchos casos donde una instancia de la misma altura de las columnas tiene una sola línea de la pena de contenido en una de las columnas. Sería una forma ineficiente diseño, si ese fuera el caso. Siempre es más seguro asumir que ninguno de columna podría ser el más alto, porque es el escenario más probable.
    • bueno, yo de reordenar y modificado mi respuesta y trató de cumplir su correcta objeción.
    • Gracias, las soluciones de trabajo aquí. Mesa fija y la envoltura de las alturas no son posibles.
    • Si usted usa top: 0 e inferior: 0 en el posicionamiento absoluto de la solución, la columna se estira para que coincida con la altura de su pariente.
    • Por CIERTO, este diseño se llama «imitación de las columnas» ans se discute en alistapart.com y estoy seguro de smashing magazine tiene un artículo acerca de esto también. Sólo google.

Dejar respuesta

Please enter your comment!
Please enter your name here