¿Cómo puedo escalar un div al 100% de alto y ancho dentro de otro elemento?

¿Cómo puedo escalar un div al 100% de alto y ancho dentro de otro elemento? En mi caso, un td sourrounding. Como soy un complemento, no puedo controlar el otro HTML en la página. Aquí está mi HTML:¿Cómo puedo escalar un div al 100% de alto y ancho dentro de otro elemento?

<body style="height:100%;"> 
    <table width="600px" height="400px" border="1"> 
    <tr> 
     <td style="background-color:silver;">Cell 1</td> 

     <td style="background-color:silver;"> 
    <div style="height:100%; background-color:yellow;"> 
     <div style="min-height:100%; height:100%; background-color:red;"> 
     Cell 2 
     </div> 
    </div> 
     </td> 
    </tr> 
    </table> 
</body>

Por lo tanto, el div Cell 2 debe ser maximizado. ¿Hay una forma de navegador cruzado para hacer esto? ¿Por qué es ésto tan complicado?

Fuente

2009-02-21 mzehrer

¿Qué pasa con el código de arriba? acaba de abrirlo en FF3 e IE6/7, y el div rojo ocupa toda la celda. –

¿Por qué molestarse en tener un div dentro de un div si va a ser el 100% de la altura y el ancho? ¿No hay otra manera de simplemente usar el div que contiene para su propósito?

Probablemente no funcione porque la altura falla a menos que el elemento de contacto tenga una determinada altura definida.

Fuente

2009-02-21 10:48:24 Sam152

Necesito el div para agregarle un mapa de google. – mzehrer

¿No puedes simplemente poner en el mapa de Google y dejar que llene el div original? – Sam152

Consulte también this stack overflow question ... después de revisar the top rated answer en esa pregunta, parece que tiene que establecer la altura del contenedor al 100% y "min-altura, altura" de un elemento secundario al 100%.

Ir a this website para obtener más información - el código HTML siguiente está despojada versión de la página web

<div style="height:100%;"> 
    <div style="min-height:100%; height:100%; background-color:red;"> 
    put your content here 
    </div> 
</div>

Fuente

2009-02-21 10:49:57

Esto no funciona para mí, vea mi ejemplo editado en la pregunta. – mzehrer

?? su tabla es 400px alta, el div no pasará ese –

Esto me sorprendió también - el enlace provisto resolvió el problema. En mi caso, también necesitaba la altura de html y body para ser 100% –

uso de JavaScript/jQuery se puede obtener fácilmente la altura del elemento padre y cambiar el tamaño del div en consecuencia.

Sin embargo, como el div se encuentra en una celda de tabla, el ancho no se fija, ya que la celda se expandiría y contraería de acuerdo con el contenido de las otras celdas de la tabla. Entonces, realmente no hay un ancho correcto, la celda se adaptará de acuerdo con el contenido de todas las celdas.

Por cierto, su problema de altura se resolvería fácilmente configurándolo en 400px, pero supongo que la estructura de la tabla que se muestra es solo un ejemplo (1 fila, 400px de altura ...).

Fuente

2009-02-21 15:48:13 jeroen

. Pensé que esto se puede resolver solo con HTML/CSS. Y sí, los 400px son solo por ejemplo. – mzehrer

Como dije, no hay una respuesta correcta porque el alto y el ancho de las celdas de la tabla cambian automáticamente, así que no creo que exista una solución html/css. – jeroen

¿Cómo puedo escalar un div al 100% de alto y ancho dentro de otro elemento?

Respuesta

Cuestiones relacionadas