Una domanda frequente nella progettazione di siti Web è "come si imposta l'altezza di un elemento al 100%"?
Questo può sembrare una risposta facile. Devi semplicemente usare i CSS per impostare l'altezza di un elemento al 100%, ma questo non estenda sempre quell'elemento per adattarlo all'intera finestra del browser. Scopriamo perché questo succede e cosa puoi fare per ottenere questo stile visivo.
Pixel e percentuali
Quando si definisce l'altezza di un elemento utilizzando la proprietà CSS e un valore che utilizza i pixel, quell'elemento occuperà tutto lo spazio verticale nel browser. Ad esempio, un paragrafo con a
altezza: 100 px;
occuperà 100 pixel di spazio verticale nel tuo progetto. Non importa quanto è grande la tua finestra del browser, questo elemento avrà un'altezza di 100 pixel. Le percentuali funzionano diversamente dai pixel. Secondo la specifica W3C, le altezze percentuali sono calcolate rispetto all'altezza del contenitore. Quindi se metti un paragrafo con a altezza: 50%;
all'interno di un div con un'altezza di 100 px, il paragrafo sarà alto 50 pixel, che corrisponde al 50% del suo elemento genitore. Se stai progettando una pagina web e hai una colonna che vorresti occupare tutta l'altezza della finestra, la naturale inclinazione è quella di aggiungere un altezza: 100%;
a quell'elemento Dopo tutto, se imposti il larghezza
a larghezza: 100%;
l'elemento occuperà tutto lo spazio orizzontale della pagina, quindi altezza
dovrebbe funzionare allo stesso modo, giusto? Sfortunatamente, non è affatto così. Per capire perché questo accade, devi capire come i browser interpretano l'altezza e la larghezza. I browser Web calcolano la larghezza totale disponibile in base all'ampiezza della finestra del browser aperta. larghezza
Se non si imposta alcun valore sui documenti, il browser scorre automaticamente il contenuto per riempire l'intera larghezza della finestra (100% larghezza è l'impostazione predefinita). Il valore di altezza viene calcolato in modo diverso rispetto alla larghezza. Infatti, i browser non valutano l'altezza a meno che il contenuto non sia così lungo da andare al di fuori del viewport (richiedendo quindi barre di scorrimento) o se il web designer imposta un assoluto per un elemento nella pagina. altezza
Altrimenti, il browser lascia semplicemente che il contenuto scorra all'interno della larghezza della vista fino alla fine. L'altezza non è in realtà calcolata affatto. I problemi si verificano quando si imposta un'altezza percentuale su un elemento con elementi padre senza altezze impostate, in altre parole, gli elementi padre hanno un valore predefinito. altezza: auto;
In effetti, stai chiedendo al browser di calcolare un'altezza da un valore non definito. Dal momento che sarebbe uguale a un valore nullo, il risultato è che il browser non fa nulla. Se si desidera impostare l'altezza delle pagine Web su una percentuale, è necessario impostare l'altezza di ogni elemento genitore di quello che si desidera definire l'altezza. In altre parole, se hai una pagina come questa: Contenuto qui
Probabilmente vuoi il div
e il paragrafo in esso per avere un 100% di altezza, ma che div in realtà ha Due elementi principali: e. Al fine di definire l'altezza del div
ad un'altezza relativa, è necessario impostare l'altezza del corpo
e html
elementi pure. Quindi avresti bisogno di usare i CSS per impostare l'altezza non solo del div ma anche del corpo e degli elementi HTML. Questa può essere una sfida, dal momento che puoi essere sopraffatto rapidamente con tutto ciò che è impostato su 100% di altezza, solo per ottenere questo effetto desiderato. Ora che sai come impostare l'altezza degli elementi della pagina al 100%, può essere eccitante uscire e farlo su tutte le pagine, ma ci sono alcune cose che dovresti sapere: Per risolvere questo problema, puoi anche impostare l'altezza dell'elemento. Se lo si imposta auto,
le barre di scorrimento appariranno se sono necessarie ma scompariranno quando non lo sono.Questo risolve l'interruzione visiva, ma aggiunge barre di scorrimento dove potresti non volere. Un altro modo per affrontare questa sfida è sperimentare con CSS Viewport Units. Utilizzando l'unità di misura dell'altezza del viewport, è possibile ridimensionare gli elementi per ottenere un'altezza definita del viewport e questo cambierà quando la finestra cambierà! Questo è un ottimo modo per ottenere immagini di altezza al 100% su una pagina, ma mantenerle flessibili per diversi dispositivi e dimensioni dello schermo. Perché le altezze percentuali non riescono
Alcune cose da notare quando si lavora con altezze del 100%
Utilizzo di unità Viewport
