Div niño 100% de altura en padre de altura automática

He estado buscando en Internet durante las últimas horas para encontrar una respuesta a mi pregunta. Leí el artículo de Floats 101 sobre alistapart, así como un montón de preguntas similares sobre stackoverflow. Creo que finalmente es hora de que haga la pregunta para evitar que mi cabeza explote.

Lo que intento hacer: un contenedor con un ancho fijo contiene un div de ancho del 100% que tiene dos hijos. El div se expande verticalmente al contenido dentro de él. Los dos hijos forman columnas dentro del div padre, por lo que se flotan para colocarlos uno al lado del otro. La columna de la izquierda se expande a la altura del div principal y tiene un color de fondo. La columna de la derecha no tiene un color de fondo y determina la altura del div padre.

Es realmente difícil de explicar, así que intenté crear un ejemplo: http://jsfiddle.net/bituser/LzNuN/1/

Realmente agradecería su ayuda. Gracias

preguntado el 21 de agosto de 11 a las 03:08

Has visto el enlace alistapart.com/articles/fauxcolumns ¿en el artículo? -

@MatTheCat No, pero gracias. Lo leeré ahora. -

2 Respuestas

No flote la columna de la derecha en absoluto, solo déle un margen lo suficientemente grande para acomodar la columna de la izquierda. Los elementos flotantes se eliminan del flujo de documentos normal y no contribuyen en nada a la altura de su padre; entonces, si flotan las columnas derecha e izquierda, su rojo #box el elemento termina sin altura y no lo ve; si deja de flotar en la columna de la derecha, entonces realmente determinará la altura de #box. Si no flotas #right_column en absoluto, se expandirá para usar todo el ancho disponible en #box.

Algo como esto:

<div id="container">
    <div id="box">
        <div id="left_column">
            <p>details stuff yada yada yada</p>
        </div>
        <div id="right_column">
            <p>other stuff yada yada yada test test test test test stuff stuff content content content content content stuff stuff example stuff test stuff content content stuff content example</p>
        </div>
    </div>
</div>

CSS:

#container {
    width: 400px;
}
#box {
    background-color: red;
}
#left_column {
    width: 200px;
    background-color: blue;
    float: left;
}
#right_column{
    margin: 0 0 0 200px;
    background-color: green;
}

Violín actualizado: http://jsfiddle.net/ambiguous/eDTdQ/

Alternativamente, puede agregar un width: 200px a #right_column y deja que siga flotando, luego agrega overflow: hidden a #box para que #box se expande para contener sus hijos flotantes:

#box {
    background-color: red;
    overflow: hidden;
}
#right_column{
    background-color: green;
    float: left;
    width: 200px;
}

Versión en vivo de este enfoque: http://jsfiddle.net/ambiguous/eDTdQ/2/

Si desea que la columna de la derecha se estire automáticamente y desea que ambas columnas tengan la altura completa, entonces puede colocar absolutamente la columna de la izquierda en lugar de flotarla:

#box {
    background-color: red;
    position: relative;
}
#left_column {
    width: 200px;
    background-color: blue;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
}

En vivo: http://jsfiddle.net/ambiguous/3Cxe3/

contestado el 13 de mayo de 12 a las 01:05

¡Guau! Muchas gracias. Mi único problema ahora es hacer que la columna de la izquierda se expanda a la altura del div principal. Pensé que, dado que la columna de la derecha no está flotando, podría establecer la altura de la columna de la izquierda al 100%. ¿No puedo porque no es un elemento de bloque? - Diana

@Sam: agregué una actualización que debería cubrir eso. Los elementos flotantes no prestan atención a height: 100% de cualquier manera útil. - mu es demasiado corto

Impresionante. Funciona. Muchísimas gracias. Si tuviera reputación, te representaría, pero parece que ya tienes suficiente. Realmente agradezco que se haya tomado el tiempo de escribir una respuesta tan amplia y profunda. Gracias. - Diana

@Sam: Saludos, no te preocupes, encantado de ayudar. - mu es demasiado corto

mira esto: http://jsfiddle.net/LzNuN/3/ debe agregar el margen al ancho total: el margen izquierdo de la columna derecha no es el margen izquierdo del padre, es el margen izquierdo de la columna izquierda, por lo que si su total es 400 px y su columna izquierda es 200 px y su columna derecha también es de 200px, no hay espacio para el margen

Respondido 21 ago 11, 07:08

Gracias por eso. Aunque solo un par de cosas. Me gustaría que la columna de la derecha use todo el espacio restante del div principal. Entonces, si cambié el ancho a 600px, aún ocupará el espacio restante. Además, debo tener la columna 1 a la misma altura que la principal que se expande al contenido dentro de ella. Gracias por todo. Ciertamente aprendí algo. - Diana

@Sam: No es necesario que flote la columna de la derecha en absoluto y no hacer flotar la columna de la derecha hace que se expanda automáticamente. - mu es demasiado corto

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.