Una domanda cumuni dumanda in u disignu di u web hè "cumu si mette l'altitudine di un elementu à u 100%"?
Questu pò esse una risposta senzilla. Pudete simplificà u CSS per definisce l'altezza di un elementu à u 100%, ma questu ùn hè micca strufinatu quellu elementu per fassi in a finestra di u navigatore tutale. Scupremu per quessa chì questu hè ciò chì pudete fà per alcuni stu stilu viscuali.
Pixels and Percentages
Quandu definisce a altezza di un elementu utilizendu a propietata CSS è un valore chì utilizate pixels, quellu elementu pigghiarete stu spaziu verticali in u navigatore.
Per esempiu, un paràgrafu cù una altezza: 100px; pigliarà 100 pixel di spaziu verticali in u vostru design.Ile ùn importa micca quantu grande hè a vostra finestra di u browser, questu elementu serà 100 píxelti in altitudine.
Per centaglii di travaglià diferentamente chì pixel. Sicondu l'specificazioni di u W3C, altitudini di percentualità sò calculati cun respecto à l'altura di u cuntinuu. Allora se mette un paràgrafu cù altitudine: 50%; dintra una divuglia cù una altezza di 100px, u paràgrafu serà 50 píxelti in altezza, chì hè un 50% di l'elementu parenti.
Perchè Percentage Heights Fail
Sè vo site per designà una pàgina web, è avete una cullizzione chì vulete piglià l'altezza di a finestra, l'inclinazione naturali hè di aghjunghje una altezza: 100%; à quellu elementu. Dopu tuttu, sè se stabilisce a larghezza à a largura: 100%; l'elementu pigghiarete u spaziu horizontale horurariu di a pagina, cusì l'altitudine ùn deve travaglià a stessa, veramente? Sfortunatamente, ùn hè micca questu casu.
Per capiscenda perchè vene questu, avete bisogni chì i navigatori interpretate l'altizza è l'larghezza. I navigatori Web calculate l'anu largu dispunibile cum'è funzione di quante larga apertu a finestra di u navigatore. Se ùn avete micca imposti alcunu valighientatu nantu à i vostri documenti, u navigatore automaticamente u cuntenutu per alloghju l'inviu di a finestra (l'altitudine di 100% hè a predeterminatu).
U valore d'altezza hè calculatu diferentamente di larghezza. Infatti, i navigatori ùn anu evaluatu l'altura à tutte menu chì u cuntenutu hè tantu longu chì ghjè fora di a stampa (es necessariu scroll bars) o se u web designer fetta una altezza assulita di un elementu in a pagina. Inutili, u navigatore abbanduneghja micca solu u flussu di cuntenutu in l'anch'ella di u viewportu finu à a fine à a fine. L'altura hè micca calculatu in tuttu.
I prublemi sò quand'elle stabilisce un altitudine percentuale nantu à un elementu chì hà elementi parentali senza alture setting - in altri palori, l'elementi parentali anu una altitudine predeterminada: l'auto; . Sò, in effetti, dumandendu u navigatore per calcule l'altezza da un valore indefinitu. Perchè quandu uguatu un valore nicu, u risultatu hè chì u navigatore ùn faci micca nunda.
Se vulete stabilisce una altezza di e vostre pagine web à un percentinu, deve stabilisce l'altezza di ogni elementu parentu di quellu chì vulete chì l'altezza definita. In altri palori, se tenete una pagina cum'è stu:
Cuntinutu quì
Probabilmente vulemu u div è u paràgrafu in l'avè a teni un 100% d'altitudine, ma quella div hà in attualmente dui elementi parent:
è. Per definisce l'altezza di a div à una altura relativa, deve stabilisce l'altezza di u corpu è l'elementi html.
Cusì avete bisognu di utilizà CSS per definisce l'altezza di not only div, ma ancu l'elementi corpu è html. Questa pò esse un sfida, postu chì puderete arrobà in rapidità di tuttu ciò chì si ponete à 100% d'altitudine, solu per alcuni stu effettu desideratu.
Qualchi Circundendu à Avè Quant'è l'Impurtante cù 100% Alturi
Avà chì sapete cumu fà l'altitudine di i vostri elementi di a pàgina à u 100%, pò esse suttante per sorte à fà è per tutte e vostre pagine, ma ci sò parechji cose chì deve esse cunnisciutu da:
- Mariggi è padding pudete aghjunghje una barra di scorri chì ùn vogliu micca. Una di e cose più avellanti ch'e aghju trovu cù u percentualità di altitudini (è anch'elli) hè chì quessa l'arrudu è i marghjini nantu à quelli esme elementi pò aghjunghjite i scroll bars à a pagina, ancu s'è tutte u cuntenutu demoniche senza avè necessariu scroll bars. Questu hè chì u altu o largu di l'elementu hè u primu chì hè calculatu. Allora i margiali è paddings sò aghjuntu. Allora si avete un elementu cù una altezza di u 100% è i marghjni di u fondu di 10 pixelli per e cose, serà una barra di scroll per l'extra 20 píxels. Ricurdativi, u mudellu di box di CSS aghjunghjenu marghjini, frontiere è padding nantu à a dimensione di un elementu, cusì u 100% cù qualsiasi di quelli altri boxe di valute mudele volenu più di u 100%.
- Se u vostru cuntenutu ova più di l'alte definita, scriverà nunda dopu. In altri palori, si tenete un disignu cù una colonna chì hè 80% in altitudine, è u cuntenutu chì si troppu internu prupone à u 100% di l'altezza, chì u 20% seguite sottu à sottu à a colonna è discu u disignu visuale di a vostra pagina. Se ùn ci hè cuntenutu suttu à a colonna, u testu avarà da scriveva solu nantu à a cima di questu. Aghju vistu quì hè questu quì chì u web designer tena a forza à l'altura di una pagina è u funziunamentu perfetta per u prugettu, ma quandu u so cuntenutu in questa pàgina cambia in u futuru, i so altitudini assuluti micca solu per fallu u flussu di a pagina. Questu hè duxenevule quandu site di custruisce siti chì sò larghezza è altitudine cambiani cù a grandezza di a finestra.
Per rimpiazzà questu, pudete puru definisce l'altezza di l'elementu. Se si mette à u carru, i rotuli di scroll will appear if they are needed but disappear when they are not. Questu solu a risplazione visuale, ma aghjusta scrollbars induve ùn voi micca vogliu micca.
Utilizà unità di Viewport
Una altra manera di pudè abordà stu sfida hè di pruvà cù CSS Viewport Units. Per utilizà a vechja di l'altezza di unità di a misurazione, pudete grandà l'elementi per piglià una aletta definita di u visu, è chì cambià cum'è questa cambiata cambia! Questa hè una bella manera di uttene u vostru 100% altitudine visuale nantu à una pàgina ma anu pussutu ancu esse flexibule per i apparenti diffiulenti è i tamantu screen.