Ho assunto fino ad ora che per impostazione predefinita, in base al normale comportamento del layout, il <body> elemento riempito al 100% dell'altezza del contenitore <html> elemento anche quando position: static era stabilito.
Tuttavia, un semplice esperimento ha dimostrato che la mia ipotesi era sbagliata e sono rimasto scioccato.
Capisco che nel normale comportamento del layout, gli elementi di blocco "altezze sono elastici e si estendono per riempire tutto il loro contenuto. Tuttavia, per qualche motivo, ho pensato che questo non si applicava <body> elemento.
Quindi, nel mio semplice esperimento, ho il seguente codice HTML:
html {
background-color: white;
}
body {
width: 50%;
background-color: gray;
margin: 0 auto;
min-height: 100%;
height: 100%;
/* position: absolute;
left: 22%; */
}<h1>Nice sounds</h1>
<p>Zoo zoo zoo</p>
<p>Koo koo koo</p>
<p>Boo boo boo</p>
<p>Poo poo poo</p>Se lascio il position: absolute; commentato come è ora, quindi, per impostazione predefinita, nel layout statico, il corpo si comporta come qualsiasi altro elemento del blocco ed è altrettanto alto per riempire il suo contenuto, ignorando le regole height: 100%; e min-height: 100%. Sembra la foto qui sotto.
Se, tuttavia, cambio il posizionamento in absolute, cioè se disapprovo quanto segue:
position: absolute;
left: 22%;
Quindi, ovviamente, obbedisce al height: 100%; min-height: 100% regole. Quindi riempie l'intera altezza del browser in questo modo:
È questo il comportamento normale? Fa il <body> l'elemento si comporta come qualsiasi altro elemento del blocco rispetto alle sue regole di layout, esp. rispetto alla sua altezza?
risposte:
2 per risposta № 1TL; DR: Sì, questo è il comportamento normale.
Però.
C'era una volta uno standard più vecchio in cui il corpo aveva l'altezza della finestra per impostazione predefinita. Molto tempo fa.
Inoltre, alcune caratteristiche oscure dell'HTML possono confondere le cose. Se non si imposta il background-color proprietà del html elemento, lo sfondo di body sarà "ereditato" da html, in modo che l'intera finestra abbia questo sfondo, facendo sembrare che il corpo occupi l'intera finestra, il che non è il caso!
0 per risposta № 2
Quando è statico ha un genitore che è html e quando usi il posizionamento statico in quel caso pensa all'interno del genitore. html di default come qualsiasi altro blocco ha height: auto quindi se lo cambi al 100% diventa come ti aspettavi.
body ha un genitore html e costruisci le sue dimensioni in base al suo genitore.