html - que - ¿Cómo puedo escalar un div a 100% de alto y ancho dentro de otro elemento?
html div altura (3)
¿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 altura definida aplicada.
¿Cómo puedo escalar un div a 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:
<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>
Entonces, el div Cell 2 debe ser maximizado. ¿Hay una forma de navegador cruzado para hacer esto? ¿Por qué es ésto tan complicado?
Usando javascript / jquery puedes obtener fácilmente la altura del elemento padre y cambiar el tamaño de tu 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 ...).
Mire también esta pregunta de desbordamiento de pila ... después de revisar la respuesta mejor calificada en esa pregunta, parece que tiene que establecer la altura del contenedor al 100% y "min.altura, altura" de un elemento secundario a 100 %
Vaya a este sitio web para obtener más información: el siguiente HTML es una versión reducida del sitio web.
<div style="height:100%;">
<div style="min-height:100%; height:100%; background-color:red;">
put your content here
</div>
</div>