expected - doctype html w3c
“Altura=100%” no funciona en html cuando se usa<! DOCTYPE>? (3)
Cuando uso HTML sin DOCTYPE , mi página HTML Height=100% está funcionando.
Pero cuando uso DOCTYPE , la altura no funciona correctamente ...
<!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" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
<body>
<table cellpadding="0" cellspacing="0" width="11" height ="100%">
<tr>
<td height="100%" bgcolor="#008000"> </td>
</tr>
</table>
</body>
¿Cómo resolver este problema?
Al agregar un DOCTYPE pasará del modo peculiaridades al modo estándar. En el modo estándar, los elementos html y body no tienen como valor predeterminado el 100% del tamaño de la ventana gráfica (ventana del navegador); en cambio, son tan grandes como deben ser para contener a sus hijos. La altura de la table del 100% significa el 100% del elemento que lo contiene, pero eso es tan grande como debe ser para contener el contenido de la tabla. El modo de curiosidades es una emulación del comportamiento de los navegadores más antiguos, en los que los elementos html y html llenaron la ventana gráfica.
Para solucionar el problema, solo necesita agregar esto a su documento:
<style>
html, body { height: 100% }
</style>
Como todos dijeron, la parte principal de la solución es poner
html, body{''height=100%''}
Pero también es realmente importante establecer la altura de cada antepasado en un 100%. por ejemplo, si su código es el siguiente
<body>
<div id="firstdiv">
<div id="scnddiv">
lets say this is the div you want to make 100%
</div>
</div>
</body>
Si #scnddiv es el div que quieres hacer al 100%, no solo tienes que hacer html y body 100% sino también #firstdiv. Así se verá algo como esto
html, body, #firstdiv {height:100%}
entonces puedes hacer que cualquier cosa en ese div sea 100%.
Espero que esto ayude.
Cuando dices ''altura = 100%'' tienes que pensar "¿100% de qué?". Es el padre de ese elemento de tabla que es el cuerpo. ¿Pero qué tan alto es el cuerpo?
Para hacer lo que quiera, agregue esto en el CSS: html, cuerpo {altura: 100%}