Haga que dos elementos CSS flotantes tengan la misma altura

Tengo dos elementos que pueden variar en altura y flotar uno junto al otro. El problema es que parece bastante feo si una caja es más alta que la otra. Entonces quiero que sean de la misma altura.Haga que dos elementos CSS flotantes tengan la misma altura

Una manera pensé que podría funcionar sería demasiado para envolverlos en un div contenedor y esperar el más alto cambia el tamaño y el más pequeño se expande para ajustarse al espacio:

HTML:

<div id="outerBox"> 
<div class="innerBoxLeft"></div> 
<div class="innerBoxRight"><br /><br /><br /></div> 
</div>

CSS:

.outerBox 
{ 
width: 100%; 
} 

.innerBoxLeft 
{ 
float:left; 
width: 45%; 
height: 100%; 
} 

.innerBoxRight 
{ 
float:right; 
width: 45%; 
height: 100%; 
}

no funciona. Creo que esto puede deberse a que el div externo no tiene una altura establecida y, por alguna razón, el cuadro más pequeño y su altura del 100% no tiene nada en qué trabajar. No puedo darle una altura establecida, sin embargo, porque eso vencería el punto.

Así que a menos que haya una otra manera, supongo que estoy preguntando: ¿Cómo puedo establecer la altura de un elemento secundario a la de su padre?

Gracias

Fuente

2009-07-23 Damien

¿por qué no utilizar una tabla?

Esto se está poniendo ridículo. El usuario quiere ver una tabla. El lenguaje HTML proporciona un elemento de tabla para lograr exactamente el objetivo que el usuario desea. Sin embargo, usamos una biblioteca completa (estoy mirando la respuesta de JQuery) para lograr el objetivo sin una tabla, ¡aunque signifique una secuencia de comandos ejecutándose en el cliente!

Fuente

2009-07-23 14:49:06

jQuery es una biblioteca bastante ligera teniendo en cuenta todas las consideraciones y con velocidades de conexión que se vuelven cada vez más rápidas, prácticamente no es un problema para la mayoría de los usuarios. Las tablas son la respuesta más fácil, pero no siempre la mejor. Para mostrar datos de manera similar a una hoja de cálculo, las tablas son por lejos el camino a seguir, pero para una presentación de lo que estoy seguro es que Damien espera ser un sitio web limpio y semántico, no es la solución ideal. – Andrew

+10

El problema no está en el tamaño sino en el acto de scripting. Resuelve un problema de diseño estático de forma dinámica del scipt. En la computadora lenta, puede ver el cambio de diseño a medida que se ejecuta la secuencia de comandos. Si un usuario ha desactivado Javascript, obtiene un diseño incorrecto. Uno debe probar HTML (contenido) separado de CSS (diseño) de Javascript (acción) y no resolver problemas de uno con otro. –

Al igual que con cualquier otra cosa, se trata de preferencia del cliente o personal. Creo mucho en la separación del contenido y el diseño, pero lo que realmente se reduce a su audiencia. Para proyectos personales, asumiré algunas cosas sobre mi público objetivo (soporte Flash, Javascript activado, conexiones de alta velocidad, navegadores modernos) y lo desarrollaré en consecuencia. Los datos analíticos generalmente confirman mis suposiciones sobre todos estos puntos. Al final, si no hay una respuesta fácil (o semánticamente válida) disponible en HTML/CSS, entonces no veo sentido en usar un poco de JS para compensar estas deficiencias. – Andrew

Una manera de hacer lo siguiente sin necesidad de utilizar JavaScript es a través de una técnica llamada Faux-Columnas.

Básicamente consiste en aplicar un background-image a los elementos primarios de los elementos flotantes, lo que le hace creer que los dos elementos tienen la misma altura.

Más información disponible en:

A List Apart: Articles: Faux Columns

Fuente

2009-07-23 14:24:01

vi esto, pero las cajas son bastante de diseño modular (es decir, son cajas de estilo) así que no estoy seguro de qué tan ideal es esta solución. – Damien

Hay varias maneras con diferentes grados de complejidad y el éxito. Una técnica que funciona para mí ( ~~No recuerdo donde vi por primera vez~~link, problems) es la siguiente:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
    <title>test</title> 
    <style type="text/css"> 
     #page { 
      clear:both; 
      overflow:hidden; 
      width:100%; 
     } 
     #page div { 
      margin:0 0 -6000px 0; /* nothing special about 6000px */ 
      padding:0 0 6000px 0; /* any large enough value will do */ 
     } 
     div.article { 
      background:blue; 
      float:left; 
      width:70%; 
     } 
     div.sidebar { 
      background:red; 
      float:right; 
      width:30%; 
     } 
    </style> 
</head> 
<body> 

<div id="page"> 
    <div class="article"> 
     <p>Some content</p> 
    </div> 
    <div class="sidebar"> 
     <p>Some content</p> 
     <p>Some content</p> 
     <p>Some content</p> 
    </div> 
</div> 
</body> 
</html>

Fuente

2009-07-23 14:30:21

Casi allí, espera que se corte el fondo de la caja. Actualizaré a medida que avance – Damien

@Damien sí, 'border-bottom' en los' div's contenidos se cortará. Normalmente diseño alrededor de eso, pero luego mis diseños no son tan complicados. –

También tenga en cuenta que este diseño se rompe con anclajes (por ejemplo, páginas de preguntas frecuentes) –

porcentajes rara vez funcionan como alturas en el CSS. Para hacer que la altura del niño sea la misma que la de sus padres, puede usar un poco de Javascript. Esto es lo que se vería en jQuery:

<script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript"> 
     $(function() {  
      var containerheight = $("outerBox").height; 
      $(".outerBox").children().css("height",containerheight) 
    </script>

Si quería hacer sólo las cajas dentro de un contenedor del mismo tamaño, el Grupo de filamento tiene un gran plugin para igualar las alturas de la caja con jQuery y es muy bien documentados:

Equal Heights With jQuery

Fuente

2009-07-23 14:33:34 Andrew

Ver este hasta el infinito si quieres, pero creo que también podría sacarte esta parte del diseño de una tabla ...

Fuente

2009-07-23 14:43:05 Damien

Creo que las tablas se deben usar para lo que fueron creadas, y eso es almacenar datos, no mostrar el diseño.

Si quieres una solución de CSS libre de errores entre navegadores & - check this article.

Fuente

2009-08-07 08:22:11 zeroDivisible

Aunque estoy de acuerdo con el comentario de su tabla, esa solución está cometiendo esencialmente el mismo pecado de marcado no semántico. Usar una tabla para algo que no es realmente una tabla (no necesariamente tiene que ser estrictamente información) es cometer el mismo pecado porque el contenido no se supone que sea una tabla. Múltiples divs no semánticos que están hechos exclusivamente para hacer columnas faux de color de fondo es igual de malo en ese frente, IMO. Si ya tiene esas envolturas, por razones semánticas (página> contenido> sección> artículo, etc.), entonces supongo que funcionaría. – kmiyashiro

Tarde para la fiesta, pero aquí está [mi swing] (http://jsfiddle.net/thirdender/vxuUr/) en columnas iguales (similar al artículo vinculado) usando: before psuedo-selectores. No es terriblemente útil, pero alguien puede encontrarlo "interesante" (o malo ... ¿al menos provocador de pensamientos?) – thirdender

function setSameHeight(class_name){ 
    var max_height = 0; 
    var cards = getElementsByClassName(class_name);  
    for (var i=0; i<cards.length; i++){ 
    if (cards[i].offsetHeight > max_height){     
     max_height = cards[i].offsetHeight; 
    } 
    } 
    for (var i=0; i<cards.length; i++){ 
    cards[i].setAttribute("height", max_height); 
    cards[i].height = max_height;   
    } 
} 

function getElementsByClassName(className){ 
    var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)"); 
    var allElements = document.getElementsByTagName("*"); 
    var results = []; 
    var element; 
    for (var i = 0; (element = allElements[i]) != null; i++) { 
    var elementClass = element.className; 
     if (elementClass && elementClass.indexOf(className) != -1 &&  hasClassName.test(elementClass)) 
     results.push(element); 
    } 
    return results; 
}

utilizados que para las tablas

Fuente

2011-06-28 07:07:01 megamanx

Esto se puede hacer por pure css. – raven

Prueba esto: http://www.filamentgroup.com/examples/equalHeights/

Es un fácil utilizar el plugin de jQuery, que sólo se puede utilizar en el contenedor primario y todos los elementos de nivel niño tapa está ajustado a la misma altura que la más alta.

Fuente

2012-10-24 18:33:30

Uso display:table-cell;

Esto es muy útil en el diseño de dos columnas de correo electrónico (anchura de respuesta).

Ver demo aquí.

Fuente

2013-11-08 03:43:01 raven

function evenup(){ 
     var maxHeight = Math.max.apply(null, $(".myClass").map(function(){ 
      return $(this).height(); 
     }).get()); 
    $(".myClass").height(maxHeight); 
}

Fuente

2014-09-09 18:39:29 Shawn

Si realmente quería un div para actuar como una mesa, sólo se puede personalizar el css "pantalla" de la div.

display: table para el contenedor div

display: table-cell para el div interior para actuar como td

Fuente

2015-08-13 09:29:10 Andrew

Haga que dos elementos CSS flotantes tengan la misma altura

Respuesta

Cuestiones relacionadas