Această metodă, folosind indentare negativă, este descrisă pe multe site-uri. Vreau să vorbesc despre câteva momente și probleme care pot apărea. Pentru început, avem nevoie de două blocuri: cel principal, care va avea totul, cu excepția subsolului, și a subsolului în sine.
Înălțimea pachetului de pagini depinde de dimensiunea corpului, astfel că pentru html și corp este necesar să setați înălțimea la 100%, fără ca subsolul să nu se micșoreze. Din același motiv, în jurul pachetului de pagini nu ar trebui să existe alte etichete.
Html și corpul au în mod implicit margini (margine și umplutură) care se adaugă la înălțimea specificată, ceea ce provoacă o bară de derulare inutilă. Aceste liniuțe trebuie să fie resetate.
Împingeți blocul de împachetare a paginii la întreaga înălțime a ferestrei utilizând proprietatea min-height. Este necesar să se folosească înălțimea min, nu înălțimea, astfel încât să nu se limiteze înălțimea blocului pe paginile lungi. În IE6, aceste proprietăți nu funcționează corect, deci are nevoie de înălțimea de înălțime obișnuită specificată cu constructul * html, pe care alte browsere ignoră.
Blocul de foi de pagină se afla în spatele marginea de jos a ferestrei și trebuie să-l mutați în sus. Lucrul logic ar fi să folosim un margine negativ pentru acest lucru, dar cu acesta în versiunile mai vechi ale IE subsolul nu va mai fi afișat. Prin urmare, trebuie să utilizați o indentare inferioară inferioară pentru wrapper-ul de pagină. Cantitatea de indentare este egală cu înălțimea subsolului (50px în acest exemplu).
pagina de înfășurare min-înălțime. 100%;
margin-bottom. -50px;
>
* html .page-wrapper înălțime. 100%;
>
Acum subsolul închide partea de jos a paginii, iar pe paginile lungi de sub ea va dispărea o parte din conținut. Pentru a evita acest lucru, trebuie să introduceți linia de jos a ambalajului de pagină. Dar umplutura nu poate fi folosită, deoarece va fi adăugată la înălțimea absolută. Prin urmare, adăugăm un bloc gol, cu o înălțime egală cu înălțimea subsolului. Iată ce sa întâmplat:
html, înălțimea corpului. 100%;
marjă. 0;
umplutură. 0;
>
.pagina de înfășurare min-înălțime. 100%;
margin-bottom. -50px;
>
* html .page-wrapper înălțime. 100%;
>
.pagina înălțimea tamponului. 50px;
>
Poate ți-a părut ciudat că înălțimea blocului de foi de pagină nu a fost niciodată stabilită. Faptul este că înălțimea subsolului nu afectează locația sa în nici un fel și este necesară numai atunci când fundul subsolului ar trebui să coincidă exact cu partea de jos a paginii. De exemplu, dacă subsolul are propriul fundal.
Uneori, după adăugarea altor elemente în pagină, apare o bară de defilare incomprehensibilă. Motivul este că elementul de sus (cel mai adesea un titlu sau un paragraf de text) are o margine care iese dincolo de marginea pachetului de pagini. În articolul lui Ivan Sagalayev despre granițe și liniuțe în detaliu această problemă și modalitățile de soluționare a acesteia sunt luate în considerare. Cea mai ușoară modalitate de a scăpa de defilare este înlocuirea marginii acestui element superior cu umplutura.
Articole similare
Trimiteți-le prietenilor: