Pillole di CSS: Height 100%: perché non funziona mai come ci aspettiamo? Cause e soluzioni!

Oggi parliamo di pillole di CSS: come risolvere problematiche legate al CSS apparentemente semplici per i più esperti ma che possono rivelarsi problematiche e cavillose per gli aspiranti web designer.

Questo è probabilmente uno dei problemi più comuni quando si parla dello sviluppo di pagine web, eppure è sempre ricorrente, prima o poi tutti ci andiamo a sbattere.

Sto parlando dei problemi relativi all’height 100%!

Che si tratti di un singolo elemento o di un intera pagina che deve essere alta il 100% della finestra cambia poco, perché l’altezza in percentuale riesce quasi sempre a non funzionare come ci aspettiamo.

Vediamo finalmente di seguito quali sono le cause più comuni e alcuni spunti per scegliere le migliori soluzioni.

Si parte da html e body

La prima cosa da ricordare per evitare di litigare troppo spesso col fullheight è che l’altezza in percentuale assegnata ad un elemento funziona soltanto se tutti i suoi elementi genitori hanno un’altezza fissa o pari al 100%.

In questo modo le dichiarazioni di altezza in percentuale assegnata a un elemento che ha anche un solo genitore con altezza non indicata, non saranno prese in considerazione dal browser e funzioneranno come height:auto, adattando l’altezza dell’elemento all’altezza del suo contenuto.

Questo è il motivo principale per cui i forum sono pieni di domande del tipo “come mai non riesco a impostare un’altezza percentuale al mio div?”.

C’è anche un’altra causa da tenere in considerazione, ma la vediamo tra un minuto.

Adesso teniamo a mente che per via di questo motivo la maggior parte delle pagine fullheghit devono iniziare con:

html,body{height:100%}

Dico la maggior parte e non tutte perché ci sono alcune situazioni (come quando è necessario semplicemente colorare lo sfondo di una pagina), in cui è possibile impostare il colore di sfondo al body o all’html senza preoccuparsi dell’altezza.

I tag html e body godono infatti di questa particolare proprietà: lo sfondo che viene applicato viene visualizzato anche al di fuori della loro lunghezza, riempiendo tutta la finestra.

È possibile vederne un esempio qui.

Al minimo il 100%

Se oltre ad un colore di sfondo vogliamo avere anche un contenitore fullheight, come in questo esempio, dovremmo impostare una situazione come questa:

html, body {height:100%; }
body {background-color:#FFB0B0; margin:0; }
#container{min-height:100%;  margin: 0 auto; width:900px; background:#FBC16D;}

È importante impostare un min-height al contenitore e non semplicemente un height altrimenti lo sfondo non seguirebbe lo scroll nel caso che i contenuti occupino più spazio dell’altezza della finestra stessa.

Siamo giunti alla seconda principale causa dei nostri litigi con le altezze percentuali: NON è concesso utilizzare min-height annidati.

Il min-height non solo segue la stessa regola dell’height, cioè che funziona solo se tutti gli elementi che lo contengono hanno un’altezza fissa o pari al 100% ma, in più, un elemento con altezza min-height non funziona all’interno di un altro.

Come se non bastasse, un height in percentuale non funziona all’interno di un elemento min-height.

Questa è la seconda motivazione di tutti i quarti d’ora persi ad assegnare altezze in percentuali a  elementi o pagine.

Quel fastidioso spazio in alto

Questo problema non è propriamente legato all’altezza percentuale, ma con una pagina fullheight è ancora più fastidioso dato che, anche se ci sono pochissimi contenuti, fa allungare la pagina di quel mezzo centimetro che basta a far apparire una scrollbar inutile.

Mi riferisco a quello spazio in alto che separa il bordo superiore del body dal bordo superiore dell’html, la cui lunghezza è pari al margine superiore del primo elemento della pagina, che invece di spingere in basso l’elemento stesso, spinge in basso tutto il body.

Questo problema è già spuntato nel primo esempio, ma lo ripropongo meglio qui.

Due cose meno conosciute sono:

  1. Questo problema si può avere anche verso il basso, col il margin-bottom dell’ultimo elemento del footer, spingendo tutta la pagina verso l’alto

  2. In relazione a determinate situazioni, questo problema si può avere anche con elementi più interni, non necessariamente su tutto il body

Ci sono tre modi per risolverlo (mi riferirò sempre al problema in alto, per il problema opposto basta capovolgere le soluzioni):

  1. Impostare un border-top al contenitore dell’elemento incriminato (quello col margin-top che sposta tutto).

  2. Impostare un padding-top (anche di un solo pixel) al contenitore dell’elemento incriminato.

  3. Assegnare lo stile overflow:hidden al contenitore dell’elemento incriminato.

Tutte e tre le soluzioni elimineranno il problema, basta scegliere in base alle proprie esigenze.

In conclusione

Abbiamo visto come mai troppo spesso le altezze in percentuali non seguono le nostre direttive e come fare per risolvere o aggirarie questo problema.

Se i metodi che ho proposto ti sono piaciuti o vuoi proporne degli altri aspetto una tua opinione nei commenti.

Tag: ,

L'autore

Diviso tra informatica e illusionismo, Antonio è un appassionato WebDeveloper freelance che ama mettersi alla prova con sfide sempre più stimolanti. Dalla mentalità imprenditoriale e dal pensiero "outside the box", è stato sedotto da Wordpress, Bootstrap e Laravel, divenute ormai le sue tenere amanti, aiutandolo a realizzare ogni progetto in maniera intelligente e ben curata.

Sito web dell'autore | Altri articoli scritti da

Articoli correlati

Potresti essere interessato anche ai seguenti articoli:

8 commenti

Trackback e pingback

  1. Realizzare un layout sticky footer con colonne fullheight grazie alle table css | Your Inspiration Web
    […] di una pagina alta almeno il 100% della finestra del browser (di cui ho già parlato in questo articolo)…