¿Cómo hacer que div coincida con la altura del td que lo contiene?

Tengo tres "paneles" dispuestos a lo largo de la fila de una mesa. Uno es más alto que los otros dos y quiero que los tres paneles coincidan con la altura del más alto. Intenté diseñar los divs con altura: 100%, pero los paneles cortos permanecen cortos, incluso mientras crecen los tds.¿Cómo hacer que div coincida con la altura del td que lo contiene?

Mi HTML es generado por JSF, por lo que tengo un control limitado sobre su forma, pero puedo modificar los estilos. Hice una versión simplificada del código generado a continuación. El mismo problema ocurre en IE8 y Firefox. Sin embargo, IE8 hace que los paneles cortos se alineen verticalmente con la parte superior de la td, mientras que Firefox los representa en el medio.

<html> 
<head> 
    <title>Test Table</title> 
    <style TYPE="text/css"> 
     td {border: 1px solid red; padding: 1px;} 
     .panel {border: 1px solid blue; padding: 1px;height:100%} 
     .panel-header{background-color: green; color: white;} 
     .panel-body {border: 1px solid green; padding: 1px; height:100%;} 
    </style> 
</head> 
<body> 
    <h1>Test Table</h1> 
    <table width="100%"> 
    <tbody> 
     <tr> 
      <td> 
       <div class="panel" style="height:200px;"> 
        <div class="panel-header"> 
        Header One 
        </div> 
        <div class="panel-body"> 
        Body One 
        </div> 
       </div> 
      </td> 
      <td> 
       <div class="panel" style="height:100%;"> 
        <div class="panel-header"> 
        Header Two 
        </div> 
        <div class="panel-body"> 
        Body Two 
        </div> 
       </div> 
      </td> 
      <td> 
       <div class="panel"> 
        <div class="panel-header"> 
        Header Three 
        </div> 
        <div class="panel-body"> 
        Body Three 
        </div> 
       </div> 
      </td> 
     </tr> 
    </tbody> 
    </table> 

</body> 
<html>

Fuente

2011-02-07 Greg Charles

He añadido una forma de hacer esto con jQuery a mi publicación. ¡Espero que ayude! –

Puede hacerlo con un posicionamiento absoluto, eche un vistazo a [esta respuesta] (http://stackoverflow.com/a/33943557/1677209). – T30

Son cinco años después, así que no puedo probar contra la página real que estaba creando entonces, pero solo probando el Fiddle de su, lo siento, pero no funciona en absoluto. Es posible que haya entendido mal el problema que estaba enfrentando. En cualquier caso, la solución jQuery que Richard sugirió funcionó bien. –

No creo que pueda establecer la altura al 100% sin indicar explícitamente una altura para los tds (o la tabla). Parece que debe especificar una altura explícita en un elemento principal antes de que height:100% surta efecto. ¿Quizás pueda modificar sus estilos para que estén en las etiquetas td en lugar de los contenedores div?

Si ayuda a poder alinear los divs con la parte superior en lugar del medio, hice un ejemplo here de cómo hacerlo (agregue vertical-align:top; a las etiquetas td). Hice un ejemplo usando solo divs también, aunque sé que dijiste que tienes un control limitado sobre su forma.

Si conoce la altura máxima de un elemento, establecer la tabla o las celdas de la tabla a esa altura (es decir, height:200px;) debe hacer que el 100% se aplique en los divs.

Editar Si no está en desacuerdo con el uso de jQuery, he actualizado mi ejemplo here para hacer lo que necesita.

Fuente

2011-02-07 20:39:39

Drackir es correcto, el elemento TD de la tabla no especifica un valor de altura en sí mismo, por lo que los elementos secundarios que piden el 100% de la altura no podrán calcular esto. Como dice Drackir, puede establecer manualmente la altura de los TD , O ... puede especificar la altura para ellos como 100%, especifique la altura de los DIV como 100% y especifique la altura de la tabla. O, también puede aplicar una altura del 100% a la tabla; table tomará el valor de altura de su elemento primario, esto puede no ser ideal, pero permitirá que todos los div sean de la misma altura a medida que agregue más contenido a un DIV dado. – Nick

Sí, dejar que toda la tabla crezca debería funcionar más, o -a menos que la mesa solo tenga una fila. Sin embargo, mi tabla real tiene varias filas. Es una pena que los elementos td sepan cómo redimensionarse, pero no pueden pasar esa información a los divs que contienen. va a trabajar en un script que puede hacer el cambio de tamaño y adjuntarlo a los paneles 'onres evento de ize Si logro que funcione, lo publicaré aquí. (¡Grande si!) –

@Greg Charles: Si no eres contrario al uso de jQuery, he agregado un ejemplo de lo que quieres a mi publicación. –

height=100%; 
or 
height=inherit;

Uno de ellos debe hacer el truco :)

Fuente

2011-02-07 20:15:48 Milaan

OP ya tiene 'height: 100%' y dice: "Intenté diseñar los divs con altura: 100%, pero los paneles cortos permanecen cortos, incluso mientras crecen los tds". Además, si se supone que estos son CSS, necesitarás usar dos puntos en lugar de un signo igual. –

Quizás no entiendo la pregunta :) Pero heredar debería funcionar entonces ... O tal vez debería darle estilo al TD (pero eso no es lo que quiere). Y sí, necesitas usar un ':'. Pero estaba escribiendo rápido: $ Lo siento :) – Milaan

Solo les estaba diciendo. Puede editar su respuesta para agregar los dos puntos. :) Hay un enlace de edición en el lado izquierdo inferior. –

Mi solución: http://jsfiddle.net/k6Dam/2/

Retire Inline-estilos (espero que pueda hacer eso) y establecer min-altura del panel -cuerpo a 200px.

Fuente

2011-02-07 20:28:27 gearsdigital

Creo que el problema es cuando el cuerpo de uno se extiende más allá de la altura de los otros cuerpos. Esta solución no resuelve que vea [aquí] (http://jsfiddle.net/Drackir/k6Dam/3/). –

@Drackir Claro, pero con este marcado no puedes hacer eso sin restricciones. Quizás podría leer la altura del primer elemento con jQuery/Javascript y establecer en función del valor dado la altura. – gearsdigital

Sí. Desafortunadamente esa puede ser la única solución. :( –

¿Cómo hacer que div coincida con la altura del td que lo contiene?

Respuesta

Cuestiones relacionadas