Non lasciare che quell'articolo ti inganni. A prima vista potrebbe sembrare confuso, ma proverò a mostrarti come il browser tratta l'elemento <html>.
L'altezza e la larghezza dell'elemento html sono controllate dalla finestra del browser.
Questo è vero per la widthma non è vero per il height.
<html> elemento - elementi di blocco come - prende l'intero spazio orizzontale della sua containing block che è la initial containing block:.
Il blocco contenitore in cui i root element vite è un rettangolo chiamato blocco contenitore iniziale. Per i supporti continui, ha le dimensioni della vista ed è ancorato all'origine della tela; è l'area della pagina per i media paginati.
Tuttavia la sua altezza calcolata is relative to its contents per impostazione predefinita, a meno che non give it an explicit height . Da qui la seguente affermazione non è vera:
altezza dell'elemento <html> è calcolato da un browser e sempre pari all'altezza della finestra
Ora si può chiedere "Se i <html> doesn 't prendere l'altezza della finestra, perché non dare una background-color al <html>changes the background color of the viewport? "
Questo perché la finestra prende il bac colore kground dell'elemento radice, <html>.Questo è documentato nel spec:
3.11.1. The Canvas Background and the Root Element
Lo sfondo dell'elemento radice diventa lo sfondo della tela e la sua area di sfondo pittura si estende a coprire l'intera tela. Tuttavia, qualsiasi immagine è dimensionata e posizionata rispetto all'elemento radice come se fossero state dipinte solo per quell'elemento. (In altre parole, l'area di posizionamento dello sfondo è determinata come per l'elemento radice .) L'elemento radice non dipinge nuovamente questo sfondo, ovvero, il valore utilizzato del suo sfondo è trasparente.
Inoltre, se il colore di sfondo <html> non è specificato, ci vorrà il colore di sfondo <body> (se c'è ne sono) e it'll pass it to the viewport. Questo è stato descritto in the spec. Inoltre si potrebbe desiderare di avere uno sguardo a questo argomento su SO:
Ma ancora una volta ci si potrebbe chiedere "perché un absolute elemento posizionato mente è posizionato con il rispetto per la finestra, piuttosto che l'elemento<html> "
la risposta sarà perché elementi posizionati in modo assoluto sono posizionate relativamente alle blocco contenitore. fixed elementi posizionati rispetto al blocco contenitore iniziale che prende le dimensioni del viewport. E absolute elementi posizionati rispetto al loro blocco contenitore che viene stabilito dall'antenato più vicino con uno position di qualsiasi valore diverso da static.
Il punto chiave is:
Se non esiste tale antenato, il blocco contenitore è il blocco contenitore iniziale .
Pertanto un elemento absolute posizionato - vista bottom: 0 dichiarazione - all'interno <html> non saranno collocati con il rispetto alla <html> stessa, ma al blocco contenitore iniziale, cioè la finestra; Example Here.
Per posizionarlo rispetto alla <html>, dobbiamo stabilire un blocco contenitore per esso dando il <html> un position di relative; Example Here
Detto questo, se si dà il <html> un height di 100%, ci vorrà 100% of height of the viewport, ma se il suo contenuto ottengono che più grande che supera l'altezza calcolata, it'll overflow the <html> elemento. Pertanto, l'elemento posizionato absolute non verrà più posizionato nella parte inferiore della pagina.
Presumo che l'altezza dell'elemento diventa più grande del 100% della finestra
Il tuo pensiero è vero. Ciò è dovuto all'utilizzo della dichiarazione min-height: 100% sulla proprietà <html> anziché height.
Dal MDN:
La struttura min-height CSS viene utilizzato per impostare l'altezza minima di un dato elemento . Impedisce che il valore utilizzato della proprietà height da diventi inferiore al valore specificato per min-height.
Permette l'<html>get higher than the viewport (dal suo contenuto).
gente a volte usano il termine di "genitore" al fine di fare riferimento al blocco contenitore del riquadrato. Questo è un Lie-to-children! In effetti gli elementi a livello di blocco rispetto alla larghezza del loro containing block in cui sono seduti.
Nella demo, la casella rossa mostra il confine-box dell'elemento <html> e la scatola blu appartiene alla <body>.
Supponendo che il <html> non prende tutta l'altezza della finestra per impostazione predefinita.
Questo è esattamente ciò che è stato fatto nell'esempio Twitter Bootstrap's sticky footer.
Grazie! Ancora non capisco il flusso di lavoro che il browser utilizza per calcolare l'altezza dell'elemento 'html' :) –
Grazie mille per la risposta dettagliata! Ora mi è chiaro che cosa mancava: è il blocco di contenimento iniziale.Potete per favore controllare le mie conclusioni che ho aggiunto alla domanda iniziale? PS. Vorrei poter revocare la tua risposta più di una volta :) –
@Maximus Questo è esattamente il mio pensiero. –