Nu știu cumva pe cineva, dar periodic am probleme cu faptul că pagina web ocupă întreaga înălțime a ecranului. Am un div care vreau să mă întind la înălțimea completă a paginii. Dar nu se întinde. De ce? Astăzi, împreună cu tine, voi încerca să-mi dau seama.
Să presupunem că avem acest HTML:
Și astfel de CSS (în fișierul style.css):
Puteți deschide HTML în browser pentru a vedea că div nu este întins pe toată înălțimea paginii, chiar dacă am indicat „height: 100%;“ în CSS. De ce întrebi?
Faptul este că HTML este doar un set de containere imbricate unul în celălalt. Pe pagina noastră există un container rădăcină , conține
, În el, la rândul său, containerul . Când punem conținutul într-unul din containere, acesta (și toate containerele care îl conțin) este întins pentru a se adapta conținutului său. Asta este, atunci când vom introduce textul în
, se întinde și, în consecință, se întinde pe toate containerele în care se află (în cazurile noastre și ).
Atunci când adăugăm regula "min-height: 100%;" la
. în mod esențial, spunem diva că trebuie să se întindă pe întreaga înălțime a recipientului care o conține. În acest exemplu, acesta este containerul . Astfel, containerul
au început să ocupe 100% din înălțimea containerului . Acum se ridică întrebarea: care este înălțimea containerului ? De fapt, cum ar fi. deoarece celălalt nu a fost indicat! Aceasta înseamnă, de fapt, adăugarea stilului "min-height: 100%";
El îi spune să fie la fel de înalt ca și el.
Astfel, pentru a obține rezultatul dorit, este necesară creșterea înălțimii containerului
. Aici ne confruntăm cu aceeași problemă în container - înălțimea sa este egală cu înălțimea ! Astfel, pentru a corecta problema (adică pentru a forța containerul
întindeți la înălțimea totală a paginii), trebuie să specificăm containerele și , astfel încât acestea să ocupe întreaga înălțime a paginii.
Asta este, schimbarea CSS la următoarele:
Rezultatul este că conținutul va ocupa întreaga înălțime a paginii. Un fapt important, dacă conținutul are o înălțime mai mare decât înălțimea paginii, va apărea o bară de defilare. Pentru a face acest lucru, în loc de înălțime: 100%; ultima linie utilizează min-height: 100%; În caz contrar, conținutul se va încheia la sfârșitul paginii.
Articole similare
Trimiteți-le prietenilor:
