¿Cómo puedo hacer que un div llene toda una celda de la tabla?

Intento llenar la celda central de una tabla con un elemento div. A los efectos de ilustrar el problema, el div se diseña con un fondo rojo. Parece que funciona en Chrome, pero no en IE. En el siguiente violín, IE está configurando la altura del div a la altura mínima necesaria para contener su contenido. Al jugar con este problema con diferentes configuraciones de CSS, logré que IE interpretara “height: 100%”; como “la altura de la ventana del navegador”. Sin embargo, como dice la pregunta, quiero que IE lo interprete como el alto de la celda td. ¿Algunas ideas?

http://jsfiddle.net/UBk79/

CSS:

*{ padding: 0px; margin: 0px; } html, body{ height: 100%; } #container{ height:100%; width: 100%; border-collapse:collapse; } #centerCell{ border: 1px solid black; } #main{ height: 100%; background-color: red; } 

HTML:

 
TOP
LEFT
CENTER
RIGHT
BOTTOM

has intentado cambiar css a:

 #centerCell{ border: 1px solid black; height:100%; } 

parece funcionar para mí en el borde, Firefox y Chrome

Investigué un poco más sobre esto y recolecté información que podría ser útil para otros que intentan resolver problemas similares. La especificación de CSS dice las siguientes tres cosas que creo que son importantes:

Primero, re: especificando la altura (de un div) como un porcentaje:

El porcentaje se calcula con respecto a la altura del bloque que contiene la caja generada. Si la altura del bloque que lo contiene no se especifica explícitamente (es decir, depende de la altura del contenido), y este elemento no está completamente posicionado, el valor se computa a ‘auto’.

http://www.w3.org/TR/CSS21/visudet.html#the-height-property

… una altura de ‘auto’ no llenará la celda a menos que el contenido sea más alto que la altura mínima de la celda. Pero si tratamos de establecer explícitamente la altura de la celda o fila contenedora, entonces nos encontramos con el siguiente problema:

CSS 2.1 no define cómo se calcula la altura de las celdas de la tabla y las filas de la tabla cuando su altura se especifica usando valores de porcentaje.

http://www.w3.org/TR/CSS21/tables.html#height-layout

Dado que la especificación no lo define, supongo que no es demasiado sorprendente que Chrome e IE elijan calcularlo de manera diferente.

Alternativamente, (como señaló indirectamente xec), intentar usar el posicionamiento relativo tiene el siguiente problema de especificación:

El efecto de ‘position: relative’ en los elementos table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell y table-caption es indefinido.

http://www.w3.org/TR/CSS21/visuren.html#propdef-position

Así que he llegado a la conclusión de que probablemente no haya una forma pura de CSS para resolver el problema que razonablemente se puede esperar que funcione en la mayoría de los navegadores.

Al principio, pensé: “Guau, la especificación de CSS es bastante de mala calidad e incompleta para dejar todo esto indefinido”. Sin embargo, cuando lo pensé más, me di cuenta de que definir las especificaciones para estos temas sería mucho más complicado de lo que parece al principio. Después de todo, las alturas de fila / celda se calculan en función de las alturas de su contenido, y quiero hacer que el alto de mi contenido sea una función de la altura de la fila / celda. Aunque tengo un algoritmo de terminación bien definido para cómo quiero que funcione en mi caso específico, no está claro si el algoritmo se generalizaría fácilmente a todos los demás casos que la especificación necesitaría cubrir sin entrar en bucles infinitos.

Simplemente configure la celda de la tabla en: position:relative y div para:

 position:absolute; top:0; left:0; width:100%; height:100%; 

Edición 2017: DEMO A CONTINUACIÓN: (tenga en cuenta que no puede ver el td rojo)

 #expandingDiv { position: absolute; height: 100%; width: 100%; top: 0; left: 0; background: yellow; } 
 
blue td green td
yellow div
Some longer text which makes the bottom two tds expand dynamically.

Aunque me gustó la respuesta de Craig y no usaré el enfoque en esta respuesta, llegué bastante lejos con este jsFiddle .

Sin embargo, depende de un truco: height: 1px configuración height: 1px sobre la mesa. Funciona en Chrome, FF, IE11 y Edge (todo lo que probé), pero Chrome comienza a portarse mal en casos extremos. Mira el violín. Aquí están los bits interesantes:

 table { width: 100%; /* Whý does this make it work? */ height: 1px; } td { border: 10px solid blue; height: 100%; } #container { width: calc(100% - 20px); height: calc(100% - 20px); border: 10px solid black; } 

Demasiado olor a hack para mí.

Aquí hay un jsfiddle: https://jsfiddle.net/55cc077/pvu5cmta/

Altura de CSS: el 100% solo funciona si el elemento primario del elemento tiene una altura explícitamente definida. Esta jQuery establece la altura de la celda de la tabla en la primera columna.

  

Simplemente establece la altura de la línea del div; siempre que su pantalla siga siendo un elemento de nivel de bloque. No es necesario el posicionamiento relativo o absoluto o la encoding dura de la altura en el nivel Div o cualquiera de sus padres. Funciona en IE 8+, Firefox y Chrome.

Ejemplo:

 line-height: 50px; // or line-height: 2em;