Hacer que un DIV llene una celda de tabla completa

He visto esta pregunta y busqué en Google un poco , pero hasta ahora nada ha funcionado. Me imagino que es 2010 ahora (esas preguntas / respuestas son viejas y, sin respuesta) y ¡tenemos CSS3! ¿Hay alguna manera de obtener un div para llenar el ancho y la altura de una celda de tabla completa usando CSS?

No sé cuál será el ancho y / o la altura de la celda antes de tiempo, y establecer el ancho y la altura del div al 100% no funciona.

Además, la razón por la que necesito el div es porque necesito posicionar absolutamente algunos elementos fuera de la celda, y position: relativeno se aplica a tds, por lo que necesito un envoltorio div.

El siguiente código funciona en IE 8, el modo de compatibilidad IE 7 de IE 8 y Chrome (no probado en otro lugar):

<table style="width:100px"> <!-- Not actually necessary; just makes the example text shorter -->
   <tr><td>test</td><td>test</td></tr>
   <tr>
      <td style="padding:0;">
         <div style="height:100%; width:100%; background-color:#abc; position:relative;">
            <img style="left:90px; position:absolute;" src="../Content/Images/attachment.png"/>
            test of really long content that causes the height of the cell to increase dynamically
         </div>
      </td>
      <td>test</td>
   </tr>
</table>

Usted dijo en su pregunta original que el establecimiento widthy heightal 100%no funcionaba, sin embargo, lo que me hace sospechar que existe alguna otra regla que sea redefinido. ¿Comprobó el estilo calculado en Chrome o Firebug para ver si las reglas de ancho / alto realmente se estaban aplicando?

Editar

¡Qué tonto soy! El divtamaño fue para el texto, no para el td. Puedes arreglar esto en Chrome haciendo el div display:inline-block, pero no funciona en IE. Eso está resultando más complicado ...

div height = 100% en la celda de la tabla solo funcionará cuando la tabla tenga el atributo de altura.

<table border="1" style="height:300px; width: 100px;">
 <tr><td>cell1</td><td>cell2</td></tr>
 <tr>
   <td>
     <div style="height: 100%; width: 100%; background-color:pink;"></div>
   </td>
   <td>long text long text long text long text long text long text</td>
 </tr>
</table>

UPD en Firefox también debe establecer el height=100%valor para el TDelemento primario

Tuve que establecer una altura falsa en <tr>y altura: heredar para<td>s

tr tiene height: 1px (se ignora de todos modos)

Luego configure el td height: inherit

Luego establece el div en height: 100%

Esto funcionó para mí en IE edge y Chrome:

<table style="width:200px;">
    <tr style="height: 1px;">
        <td style="height: inherit; border: 1px solid #000; width: 100px;">
            <div>
              Something big with multi lines and makes table bigger
            </div>
        </td>
        <td style="height: inherit; border: 1px solid #000; width: 100px;">
            <div style="background-color: red; height: 100%;">
                full-height div
            </div>
        </td>
    </tr>
</table>

Si su razón para querer un 100% div dentro de una celda de la tabla fuera poder tener un color de fondo extendido a la altura completa pero aún así tener espacio entre las celdas, podría darle el <td>color de fondo y usar el CSS propiedad de espacio entre bordes para crear el margen entre las celdas.

Sin embargo, si realmente necesita un div de altura del 100%, entonces, como otros han mencionado aquí, debe asignar una altura fija <table>o usar Javascript.

Entonces, debido a que todos están publicando su solución y ninguno era bueno para mí, aquí está el mío (probado en Chrome y Firefox).

table { height: 1px; }
tr { height: 100%; }
td { height: 100%; }
td > div { height: 100%; }

Violín: https://jsfiddle.net/nh6g5fzv/

Dado que todos los demás navegadores (incluidos IE 7, 8 y 9) manejan position:relativeuna celda de tabla correctamente y solo Firefox se equivoca, su mejor opción es usar una cuña de JavaScript. No debería tener que alterar su DOM para un navegador fallido. La gente usa cuñas todo el tiempo cuando IE hace algo mal y todos los otros navegadores lo hacen bien.

Aquí hay un fragmento con todo el código anotado. JavaScript, HTML y CSS utilizan prácticas de diseño web receptivas en mi ejemplo, pero no es necesario si no lo desea. (Sensible significa que se adapta al ancho de su navegador).

http://jsfiddle.net/mrbinky3000/MfWuV/33/

Aquí está el código en sí, pero no tiene sentido sin el contexto, así que visite la URL jsfiddle arriba. (El fragmento completo también tiene muchos comentarios tanto en CSS como en Javascript).

$(function() {
    // FireFox Shim
    if ($.browser.mozilla) {
        $('#test').wrapInner('<div class="ffpad"></div>');
        function ffpad() {
            var $ffpad = $('.ffpad'),
                $parent = $('.ffpad').parent(),
                w, h;
            $ffpad.height(0);
            if ($parent.css('display') == 'table-cell') {               
                h = $parent.outerHeight();
                $ffpad.height(h);
            }
        }
        $(window).on('resize', function() {
            ffpad();
        });
        ffpad();
    }
});

Propongo una solución usando el experimental Flexbox para simular un diseño de tabla que permitirá que el elemento de contenido de una celda llene verticalmente su celda principal:

Manifestación

.table{ display:flex; border:2px solid red; }
.table > *{ flex: 1; border:2px solid blue; position:relative; }
.fill{ background:lightgreen; height:100%; position:absolute; left:0; right:0; }

/* Reset */
*{ padding:0; margin:0; }
body{ padding:10px; }

<div class='table'>
  <aside><div class='fill'>Green should be 100% height</div></aside>
  <aside></aside>
  <aside>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus conguet.</p>
  </aside>
</div>

Después de varios días de búsqueda, descubrí una posible solución para este problema.

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
</head>

<body style="height:100%">
<!-- for Firefox and Chrome compatibility set height:100% in the containing TABLE, the TR parent and the TD itself. -->
<table width="400" border="1" cellspacing="0" cellpadding="0" style="height:100%;">  
  <tr>
    <td>whatever</td>
    <td>whatever</td>
    <td>whatever</td>
  </tr>
  <tr style="height:100%;">
    <td>whatever dynamic height<br /><br /><br />more content
</td>
    <td>whatever</td>

    <!-- display,background-color and radius properties in TD BELOW could be placed in an <!--[if IE]> commentary If desired.
    This way TD would remain as display:table-cell; in FF and Chrome and would keep working correctly.    
    If you don't place the properties in IE commentary it will still work in FF and Chorme with a TD display:block;

    The Trick for IE is setting the cell to display:block; Setting radius is only an example of whay you may want a DIV 100%height inside a Cell.
    -->

    <td style="height:100%; width:100%; display:block; background-color:#3C3;border-radius: 0px 0px 1em 0px;">

    <div style="width:100%;height:100%;background-color:#3C3;-webkit-border-radius: 0px 0px 0.6em 0px;border-radius: 0px 0px 0.6em 0px;">
    Content inside DIV TAG
    </div>
     </td>
  </tr>
</table>
</body>
</html>

Idioma español: El truco es establecer la Tabla, el TR y el TD una altura: 100%. Esto lo hace compatible con Firefox y Chrome. Internet Explorer ignora eso, por lo que ponemos la etiqueta TD como bloque. De esta forma Explorer sí toma la altura máxima.

Explicación en inglés: dentro de los comentarios del código

si <table> <tr> <td> <div>todos se han height: 100%;configurado, entonces el div llenará la altura de celda dinámica en todos los navegadores.

Ok, nadie mencionó esto, así que pensé en publicar este truco:

.tablecell {
    display:table-cell;
}
.tablecell div {
    width:100%;
    height:100%;
    overflow:auto;
}

desbordamiento: auto en ese contenedor div dentro de la celda hace el truco para mí. Sin ella, el div no usa toda la altura.

Si la celda de la tabla es del tamaño que desea, simplemente agregue esta clase css y asígnela a su div:

.block {
   height: -webkit-calc(100vh);
   height: -moz-calc(100vh);
   height: calc(100vh);
   width: 100%;
}

Si desea que la celda de la tabla también llene al padre, asigne la clase a la celda de la tabla también. Espero que ayude.

un poco tarde para la fiesta pero aquí está mi solución:

<td style="padding: 0; position: relative;">
   <div style="width: 100%; height: 100%; position: absolute; overflow: auto;">
     AaaaaaaaaaaaaaaaaaBBBBBBBbbbbbbbCCCCCCCCCccccc<br>
     DDDDDDDddddEEEEEEEEdddfffffffffgggggggggggggggggggg
   </div>
</td>

Debido a que no tengo suficiente reputación para publicar un comentario, ¡quiero agregar una solución completa para varios navegadores que combina los enfoques de @Madeorsk y @ Saadat con algunas modificaciones! (Probado en Chrome, Firefox, Safari, IE y Edge a partir del 10/02/2020)

table { height: 1px; }
tr { height: 100%; }
td { height: 100%; }
td > div { 
   height: -webkit-calc(100vh);
   height: -moz-calc(100vh);
   height: calc(100%);
   width: 100%;
    background: pink;  // This will show that it works!
} 

Sin embargo, si eres como yo, entonces también quieres controlar la alineación vertical, y en esos casos, me gusta usar flexbox:

td > div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

Creo que la mejor solución sería usar JavaScript.

Pero no estoy seguro de que necesite hacer esto para resolver su problema de posicionar elementos en el <td>exterior de la celda. Para eso podrías hacer algo como esto:

<div style="position:relative">
    <table>
        <tr>
            <td>
                <div style="position:absolute;bottom:-100px">hello world</div>
            </td>
        </tr>
    </table>
</div>

No en línea, por supuesto, sino con clases e identificadores.

Para hacer la altura: 100% de trabajo para el div interno, debe establecer una altura para el td padre. Para mi caso particular funcionó usando la altura: 100%. Esto hizo que la altura interna del div se estirara, mientras que los otros elementos de la mesa no permitieron que el td se volviera demasiado grande. Por supuesto, puede usar otros valores que no sean 100%

Si también desea que la celda de la tabla tenga una altura fija para que no crezca en función del contenido (para hacer que el div div scroll u ocultar el desbordamiento), es cuando no tiene más remedio que hacer algunos trucos js. El td padre deberá tener la altura especificada en una unidad no relativa (no%). Y lo más probable es que no tenga más remedio que calcular esa altura usando js. Esto también necesitaría el diseño de tabla: estilo fijo establecido para el elemento de tabla

Me encuentro con problemas similares con frecuencia y siempre solo uso table-layout: fixed;en el tableelemento y height: 100%;en el div interno.

Finalmente no encontré nada que funcionara en todos mis navegadores y en todos los modos de representación de navegador / DocTypes, excepto por el uso de jQuery. Así que aquí está lo que se me ocurrió.
Incluso tiene en cuenta el rowpan.

function InitDivHeights() {
    var spacing = 10; // <-- Tune this value to match your tr/td spacing and padding.
    var rows = $('#MyTable tr');
    var heights = [];
    for (var i = 0; i < rows.length; i++)
        heights[i] = $(rows[i]).height();
    for (var i = 0; i < rows.length; i++) {
        var row = $(rows[i]);
        var cells = $('td', row);
        for (var j = 0; j < cells.length; j++) {
            var cell = $(cells[j]);
            var rowspan = cell.attr('rowspan') || 1;
            var newHeight = 0;
            for (var k = 0; (k < rowspan && i + k < heights.length); k++)
                newHeight += heights[i + k];
            $('div', cell).height(newHeight - spacing);
        }
    }
}
$(document).ready(InitDivHeights);

Probado en IE11 (modo Edge), FF42, Chrome44 +. No probado con tablas anidadas.

puedes hacerlo así:

<td>
  <div style="width: 100%; position: relative; float: left;">inner div</div>
</td>

Si el elemento posicionado y su elemento padre no tienen ancho y alto, establezca

padding: 0;

en su elemento padre,

Esto probablemente no se recomienda.

Descubrí una solución alternativa que funciona si su div no contiene texto y tiene un fondo uniforme.

display: 'list-item'

le da al div la altura y el ancho deseados, pero con el gran inconveniente de tener una viñeta de elemento de lista. Como el div tiene un color de fondo homogéneo, eliminé la viñeta con esos estilos:

list-style-position: 'inside',
color: *background-color*,

No estoy seguro de lo que quieres hacer, pero puedes probar este:

<td width="661" valign="top"><div>Content for New Div Tag Goes Here</div></td>

Lo siguiente debería funcionar. Debe establecer una altura para la celda principal. https://jsfiddle.net/nrvd3vgd/

<table style="width:200px; border: 1px solid #000;">
    <tr>
        <td style="height:100px;"></td>
    </tr>
    <tr>
        <td style="height:200px;">
            <div style="height:100%; background: #f00;"></div>
        </td>
    </tr>
</table>

Prueba esto:

<td style="position:relative;">
    <div style="position:absolute;top:0;bottom:0;width:100%;"></div>
</td>

Intenta poner display: bloque de tabla dentro de una celda

No veo aquí un viejo truco CSS para < div > dentro de < td >. Por lo tanto, recuerdo: simplemente establezca un valor mínimo para el ancho , pero lo que necesita para el ancho mínimo . Por ejemplo:

<div style="width: 3px; min-width: 99%;">

El ancho del td , en ese caso, depende de usted.

Esta es mi solución para extender 100% de altura y 100% de ancho en un html <td>

si elimina la primera línea de su código, puede arreglarlo ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

porque este tipo de documento no permite en algunos archivos usar el 100% por ciento dentro <td>, pero si elimina esta línea, el cuerpo falla al expandir el fondo a 100% de altura y 100% de ancho, así que encontré esto DOCTYPEque resuelve el problema

<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">

Este DOCTYPE le permite extender el fondo en su cuerpo como 100% de altura y 100% de ancho, y le permite tomar todo el 100% de altura y 100% de ancho en el <td>