Articolo originale: https://www.freecodecamp.org/news/html-page-width-height/
Il CSS è difficile, ma è anche permissivo, e ciò ci consente di sparare degli stili a casaccio nel nostro foglio di stile.
La pagina viene comunque caricata, non c'è un "crash".
Parlando della larghezza e dell'altezza della pagina, sai come impostarle per l'elemento html? E per il body?
Schiaffi degli stili in entrambi gli elementi e speri per il meglio?
Se lo fai, non sei il solo.
Le risposte a queste domande non sono intuitive.
Sono colpevole al 100% di aver applicato in passato degli stili a entrambi gli elementi senza considerare quale proprietà dovrebbe essere applicata a quale elemento. 🤦♂️
Non è raro vedere delle proprietà CSS applicate a entrambi gli elementi html e body in questo modo:
html, body {
min-height: 100%;
}
È importante?
Si, lo è.
La definizione dello stile qui sopra crea un problema:
Impostare min-height al 100% su entrambi gli elementi non permette all'elemento body di riempire la pagina come potresti aspettarti. Se controlli i valori di stile calcolati negli strumenti per sviluppatori, l'elemento body ha un'altezza di zero.
Intanto, l'elemento html ha un'altezza uguale alla parte visibile della pagina nel browser.
Osserva i seguenti screenshot dai Dev Tool di Chrome:
Perché accade?
Usare una percentuale come valore per la dimensione richiede che l'elemento faccia riferimento all'elemento genitore per basare la percentuale.
L'elemento html fa riferimento al viewport, che ha un valore di altezza pari all'altezza visibile dello schermo. Tuttavia, abbiamo impostato soltanto un valore per min-height dell'elemento html... NON un valore adeguato per la proprietà height.
Dunque, l'elemento body non ha un valore di altezza dell'elemento genitore a cui fare riferimento per decidere a cosa corrisponde il valore 100%.
Il problema potrebbe essere ben nascosto
Se hai iniziato con abbastanza contenuto da riempire il corpo della pagina, potresti non aver notato questo problema.
E per far sì che sia più difficile da notare, se imposti un colore di sfondo per entrambi gli elementi o anche su uno solo di loro, il viewport viene riempito totalmente dal colore, dandoti l'impressione che l'elemento body sia alto quanto il viewport.
Non lo è. È ancora a zero.
L'immagine di sopra è stata presa da una pagina con questo CSS:
html, body {
min-height: 100%;
}
body {
background-color: dodgerblue;
}
Ereditarietà inversa?
Per uno strano fenomeno, l'elemento html assume il colore di sfondo dell'elemento body se non imposti un colore una proprietà background-color per l'elemento html.
Quindi qual è l'altezza ideale per avere una pagina intera responsiva?
Per anni, la risposta è stata questa:
html {
height: 100%;
}
body {
min-height: 100%;
}
Questo permette all'elemento html di fare riferimento al genitore viewport e avere un valore di height corrispondente al 100% del valore del viewport.
Dato che l'elemento html riceve un valore di altezza, il valore di min-height assegnato al body restituisce un valore di altezza iniziale che corrisponde a quello dell'elemento html.
Questo permette al body di crescere se il contenuto diventa troppo grande per la pagina.
L'unico svantaggio è che l'elemento html non cresce oltre l'altezza visibile del viewport. Tuttavia, permettere al body di diventare troppo grande per l'elemento html è stato considerato accettabile.
La soluzione moderna è semplice
body { min-height: 100vh; }
Questo esempio fa uso dell'unità vh (viewport height) per permettere al body di avere un valore minimo di altezza in base all'altezza totale del viewport.
Come discusso precedentemente per il colore di sfondo, se non impostiamo un valore di altezza per l'elemento html, questo assumerà lo stesso valore dato all'elemento body.
Perciò questa soluzione evita che l'elemento html debordi come nella soluzione precedente ed entrambi gli elementi possono crescere con il contenuto!
L'utilizzo delle unità vh, in effetti, hanno causato alcuni problemi ad alcuni browser mobile in passato, ma sembra che adesso Chrome e Safari siano compatibili con l'uso delle unità viewport.
L'altezza della pagina può portare a una barra di scorrimento orizzontale
Aspetta, cosa?
Non dovrebbe essere la "larghezza" della pagina?
E invece no.
In un'altra misteriosa serie di eventi, l'altezza della pagina può attivare la barra di scorrimento orizzontale del browser.
Quando il tuo contenuto diventa più alto dell'altezza del viewport, viene attivata la barra di scorrimento verticale sulla destra, e questo può far sì che nella pagina compaia istantaneamente anche una barra di scorrimento orizzontale.
Come rimediare?
Potresti dormire meglio sapendo che tutto inizia impostando la larghezza della pagina.
Il problema sorge quando un elemento – non soltanto gli elementi html o body – viene impostato su 100vw (viewport width).
Le unità viewport non tengono conto dell'approssimazione di 10pixel che occupa la barra di scorrimento verticale.
Perciò, quando questa si attiva, ottieni anche una barra di scorrimento orizzontale.
Come impostare la pagina a larghezza piena
Magari potresti semplicemente non farlo.
Non impostare una larghezza per gli elementi html e body farà sì che occupino di default tutta la larghezza dello schermo. Se imposti un valore di width diverso da auto, considera di utilizzare prima un reset CSS.
Ricorda, di default l'elemento body ha 8px di margine su tutti i lati.
Un reset CSS rimuove questo margine. Altrimenti, impostare la larghezza al 100% prima di rimuovere i margini porterà il body a debordare. Ecco il reset CSS che utilizzo:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
Come impostare la larghezza a tuo piacimento
Anche se non è sempre necessario impostare una larghezza, di solito lo faccio.
Potrebbe essere semplicemente un'abitudine.
Se hai impostato la larghezza del body al 100% la pagina occuperà tutta la larghezza. Questo equivale essenzialmente a non impostare un valore di larghezza e lasciare quello di default.
Se vuoi usare l'elemento body come contenitore più piccolo e lasciare che l'elemento html riempia la pagina, puoi impostare un valore per la proprietà max-width sul body.
Ecco un esempio:
html { background-color: #000; }
body {
min-height: 100vh;
max-width: 400px;
background-color: papayawhip;
margin: 0 auto;
}Conclusione
Senza dare un valore di altezza all'elemento html , impostare height e/o min-height del body al 100% porta a non avere un'altezza (prima di aggiungere del contenuto).
Tuttavia, senza un valore di larghezza dell'elemento html, impostare la proprietà width del body al 100% genera una pagina di larghezza pari alla larghezza dello schermo.
Tutto ciò può essere controintuitivo e disorientante.
Per una pagina responsiva di altezza uguale all'altezza dello schermo, imposta la proprietà min-height del body su 100vh.
Se imposti una larghezza della pagina, scegli 100% invece di 100vw per evitare barre di scorrimento orizzontali a sorpresa.
Preferisci un metodo diverso per impostare l'altezza e la larghezza in CSS?
Fammelo sapere!