"Altura = 100%" no funciona en html cuando se usa <!DOCTYPE>?

Cuando uso HTML sin DOCTYPE, mi página HTML Height=100% está funcionando."Altura = 100%" no funciona en html cuando se usa <!DOCTYPE>?

Pero cuando se utiliza DOCTYPE, la altura no está funcionando 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">&nbsp;</td> 
    </tr> 
</table> 

</body>

¿Cómo resolver este problema?

Fuente

2009-12-27 Alex

Aquí hay una explicación simple y clara de la cuestión DOCTYPE: http://stackoverflow.com/a/32215263/3597276 –

Cuando dice 'height = 100%' tiene que pensar "100% of what?". Es el padre de ese elemento de tabla que es el cuerpo. Pero, ¿qué tan alto es el cuerpo?

para hacer lo que desea, añadir esto en el CSS: html, body {height: 100%}

Fuente

2009-12-27 16:34:16 Rob

Adición de un DOCTYPE interruptores que desde quirks mode a modo de estándares. En el modo estándar, los elementos html y body no tienen por defecto el 100% del tamaño de la ventana gráfica (ventana del navegador); en cambio, solo son tan grandes como deben ser para contener a sus hijos. La altura del table del 100% significa el 100% del elemento que lo contiene, pero eso solo es tan grande como debe contener el contenido de la tabla. El modo Quirks es una emulación del comportamiento de los navegadores más antiguos, en los que los elementos html y body llenaron la ventana gráfica.

Para solucionar el problema, sólo tiene que añadir esto a su documento:

<style> 
    html, body { height: 100% } 
</style>

Fuente

2009-12-27 16:51:17

trato igual que el anterior, pero la anchura (100%) está funcionando, pero la altura no trabaja – Alex

puede editar su publicación con el código exacto que está intentando, y en qué navegador (s) falla? –

Probé esto en Firefox, y el resultado está bien. gracias @Brian Campbell –

Como todo el mundo dijo que la parte principal de la solución es poner

html, body{'height=100%'}

Pero también es Es muy importante establecer que la altura de cada antepasado sea del 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 desea hacer 100%, no sólo lo que tiene que hacer html y cuerpo 100%, sino también #firstdiv. Entonces se verá algo como esto

html, body, #firstdiv {height:100%}

entonces usted puede hacer que cualquier cosa en ese div sea del 100%.

Espero que esto ayude.

Fuente

2017-06-16 03:40:25 user4504661

¿No estás seguro de por qué esto fue degradado? – Brian

"Altura = 100%" no funciona en html cuando se usa <!DOCTYPE>?

Respuesta

Cuestiones relacionadas