Hacer una fila de divs todos sean de la misma altura con CSS

Tengo una fila de divs que deben tener todos la misma altura, pero no tengo forma de saber cuál es la altura con anticipación (el contenido proviene de un fuente externa). Inicialmente intenté ubicar los divs en un div que los rodeaba y los hice flotar hacia la izquierda. Luego configuré su altura como "100%", pero esto no tuvo ningún efecto perceptible. Al establecer la altura en el div circundante a una altura fija, pude hacer que los divs flotantes se expandieran, pero solo hasta la altura fija del contenedor. Cuando el contenido en uno de los divs excedió la altura fija, se derramó; los divs flotantes se negaron a expandirse.Hacer una fila de divs todos sean de la misma altura con CSS

Busqué este problema de flotated-divs-of-the-same-height y aparentemente no hay forma de hacerlo usando CSS. Así que ahora estoy tratando de usar una combinación de posicionamiento relativo y absoluto en lugar de flotantes. Este es el CSS:

<style type="text/css"> 
div.container { 
    background: #ccc; 
    position: relative; 
    min-height: 10em; 
} 
div.a { 
    background-color: #aaa; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    bottom: 0px; 
    width: 40%; 
} 
div.b { 
    background-color: #bbb; 
    position: absolute; 
    top: 0px; 
    left: 41%; 
    bottom: 0px; 
    width: 40%; 
} 
</style>

Ésta es una versión simplificada del HTML:

<div class="container"> 
    <div class="a">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</div> 
    <div class="b">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit.</div> 
    </div>

Esto funciona, a menos que cambie el min-height a algo así como 5em (demonstranting lo que ocurre cuando el contenido excede la altura mínima), y puede ver que mientras el texto no se corta, los divs aún se niegan a expandirse. Ahora estoy perdido. ¿Hay alguna manera de hacer esto usando CSS?

Fuente

2008-12-16 Anonymous

* tos *

* tos * ;-) –

Respuesta

Hacerlos exactamente de la misma altura puede ser algo complicado, pero si tienen que parecer ser de la misma altura, es posible que desee consultar la técnica faux columns.

He intentado algunos otros métodos, pero esta es la forma más confiable que he encontrado de obtener el efecto, además de usar tablas, por supuesto.

Fuente

2008-12-16 06:05:30 seanb

Puede usar JavaScript, pero por supuesto se romperá sin que JavaScript esté activado. Luego hay tablas, pero esto arruina el punto de CSS. Tal vez seanb's answer podría funcionar, coloque una imagen de fondo que crea la ilusión de que todas las columnas van hacia abajo. Esto se conoce como técnica de fondo falso.

O siéntate fuerte y espera a que display: table-cell sea compatible con todos/la mayoría de los navegadores.

Fuente

2008-12-16 06:18:18 alex

Este es uno de esos momentos en los que puedes quedarte atrapado entre ser idealista o realista. Entiendo que no hay ningún valor semántico para colocar datos no tabulares en una tabla estrictamente por razones de formato, pero no quiero ver que hace todo lo posible para crear una solución no tabular a este problema simplemente por su propio bien.

Soy el primero en derribar diseños no semánticos, confía en mí, pero a veces tienes que enfrentar el hecho de que CSS + marcado semántico no funciona para todos los escenarios de diseño. No conozco las necesidades de accesibilidad de este sitio, pero recomendaría que busque una solución más práctica para este problema.

¡Salud para acercarse a esto de la manera correcta y buscando la manera correcta de resolverlo! Desafortunadamente esta es una de las esquinas oscuras de CSS (junto con el posicionamiento vertical dentro de un bloque) que es simplemente imposible de hacer sin columnas falsas, JavaScript o celdas de tabla.

Cualquiera que elija, no se adhiera a un estándar por sí mismo.

Fuente

2008-12-16 06:29:30

Bien dicho, es poco probable que alguien salga lastimado si usa una mesa ... – seanb

Gracias por las respuestas, chicos. No creo que la imagen de fondo funcione porque el ancho de las columnas también puede variar según la cantidad de columnas que haya (el usuario puede cambiarlo).Supongo que usaré tablas :(

Fuente

2008-12-16 07:20:32

¡Tablas sí! Si se siente realmente mal al cabo de unos años, puede cambiarlos a divs y usar display: table-cell ... – alex

OK, la cosa de la mesa resultó ser un poco más complicada de lo que pensé. Resulta que la solución de Javascript es la más simple (para mi situación), ya que mi . aplicación es una aplicación AJAX y el marco utiliza Prototype.js Todo lo que necesita es un par de líneas de JS:

$$('div.container').each(function (element) { 
var longest = 0; 

element.descendants().each(function (child) { 
    if (child.getHeight() > longest) 
    longest = child.getHeight(); 
}); 

element.descendants().each(function (child) { 
    child.style.height = longest + 'px'; 
}); 
});

Gracias de nuevo por la ayuda

Fuente

2008-12-17 11:03:59

si buscas una opción puramente CSS y. Puedes separar el fondo del bloque del contenido y luego la respuesta es dos. Tienen dos bits de código para cada bloque, uno para el contenido y otro para el fondo. Así es como se pone e:

<div id="wrapper"> 
    <div class="content" id='one> 
    <div class="content" id="two> 
    <div class="content" id="three> 
    <div class="background" id="back-one"> 
    <div class="background" id="back-two"> 
    <div class="background" id="back-three"> 
</div>

Coloque los divs de contenido usando flotadores. A continuación, coloque los fondos usando posicionamiento absoluto (y un índice Z para colocarlos detrás)

Esto funciona porque los flotadores pueden establecer la altura y los elementos absolutamente posicionados pueden tener una altura del 100%. Es un poco desordenado, pero hace el trabajo.

Fuente

2008-12-17 11:12:09

Cuestiones relacionadas