"Altezza = 100%" non funziona in html quando si utilizza <!DOCTYPE>?

Quando utilizzo l'HTML senza DOCTYPE, la mia pagina HTML Height=100% funziona."Altezza = 100%" non funziona in html quando si utilizza <!DOCTYPE>?

Ma quando io uso DOCTYPE, l'altezza non funziona correttamente ...

<!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>

Come risolvere questo problema?

fonte

2009-12-27 Alex

Ecco una spiegazione semplice e chiara del problema DOCTYPE: http://stackoverflow.com/a/32215263/3597276 –

Quando si specifica "altezza = 100%", si deve pensare "al 100% di cosa?". È il genitore di quell'elemento del tavolo che è il corpo. Ma quanto è alto il corpo?

di fare ciò che si desidera, aggiungere questo nel CSS: html, body {height: 100%}

fonte

2009-12-27 16:34:16 Rob

Aggiunta di un DOCTYPE switch si da quirks mode alla modalità standard. In modalità standard, gli elementi html e body non hanno il valore predefinito al 100% della dimensione della finestra (finestra del browser); invece, sono grandi solo quanto devono essere per contenere i loro figli. L'altezza del 100% di table corrisponde al 100% dell'elemento contenitore, ma è grande solo quanto deve contenere il contenuto della tabella. La modalità Quirks è un'emulazione del comportamento dei browser più vecchi, in cui gli elementi html e body hanno riempito la finestra.

Per risolvere il problema, è sufficiente aggiungere questo al documento:

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

fonte

2009-12-27 16:51:17

provo come sopra, ma la larghezza (100%) sta lavorando ma l'altezza non funziona – Alex

è possibile modificare il tuo post con il codice esatto che stai provando e su quale browser non riesce? –

Ho provato questo in Firefox, e il risultato è Ok. grazie @ Brian Campbell –

Come tutti ha detto che la parte principale della soluzione è di mettere

html, body{'height=100%'}

Ma è anche davvero importante impostare l'altezza di ogni singolo antenato al 100%. per esempio se il codice è il seguente

<body> 
    <div id="firstdiv"> 
     <div id="scnddiv"> 
       lets say this is the div you want to make 100% 
     </div> 
    </div> 
</body>

se #scnddiv è il div si vuole fare al 100%, non solo si deve fare html e corpo al 100%, ma anche #firstdiv. Quindi assomiglierà a qualcosa del genere

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

quindi si può fare qualsiasi cosa in quel div per essere al 100%.

Spero che questo aiuti.

fonte

2017-06-16 03:40:25 user4504661

Non sai perché è stato downvoted? – Brian

"Altezza = 100%" non funziona in html quando si utilizza <!DOCTYPE>?

risposta

Problemi correlati