5 moduri de a crea un subsol adeziv
Marja inferioară negativă la blocul de înfășurare
Există un înveliș de curgere, care conține toate blocurile cu excepția subsol. Acest bloc este atribuit o marjă inferioară negativă, egală cu înălțimea de subsol.
Această metodă necesită un element suplimentar în conținutul (e clasa .push) la o marjă negativă nu este tras și zona de text de subsol nu este blocat. Adăugați bloc de împingere a fost o soluție destul de inteligent, deoarece nu are nici o umplutură de fund. Dacă și această unitate ar fi o umplutură, el ar fi trebuit să ia în considerare margin'e negativ.
Marja superioară negativă pe subsol
Această tehnică nu are nevoie de blocul de împingere, dar pe care doriți să adăugați un înveliș bloc suplimentar în jurul valorii de conținut, care este setat padding inferior. Acest lucru se face, astfel că, din cauza subsol margin'a negativ nu a fost ridicat.
HTML5 și CSS3 practica de la zero la rezultatul!
Ambele tehnici sunt similare, deoarece ei doresc să adăugați element HTML suplimentar.
Calco Funcția () reduce înălțimea învelișului
O modalitate de a renunța la marcaj suplimentar este de a regla înălțimea blocului pentru înfășurare cu ajutorul funcției calculat (). Într-un astfel de caz, nu se vor suprapune, cele două elemente sunt unite și formează o înălțime de 100%.
Fii atent la 70px în funcția Calc () și o înălțime de subsol 50px fix. Aici vom lua în considerare faptul că subsolul are o marjă mai mică la 20px. Din înălțimea totală este necesară pentru a scădea înălțimea subsolului și indentate exterior inferior. Noi folosim, de asemenea, Vw unități, nu pentru a cere 100% înălțimea corpului, nu și-a dat încă 100% din înălțimea blocului înveliș.
Problema principală cu toate metodele descrise mai sus este că nu au nevoie de o înălțime fixă de subsol. In web design o înălțime fixă este considerată ton rău, conținut, după ce toate se pot schimba. Totul trebuie să fie flexibil. Fixe clopot înălțime este rău. Flexbox vă permite nu numai să adăugați markup suplimentar pentru a crea aderarea subsol, dar, de asemenea, utiliza o variabilă în valoarea înălțimii.
Puteți adăuga chiar și un antet în partea de sus sau altceva. Flexbox poate fi utilizat în două moduri:
flex: elementul 1 copil pentru a umple spațiul (conținut în cazul nostru).
Sau margin-top: auto pentru deplasarea elementelor de copil, în măsura în care este posibil unul de altul (sau orice altă direcție margin'a).
Aspectul grilă chiar mai noi tehnologii decât flexbox (și cu mult mai puțin sprijin). Grile pot fi, de asemenea, ușor de adaptat pentru aderarea de subsol.
Demo-ul ar trebui să funcționeze în Chrome Canary și Firefox Developer Edition. Ideea este că acesta poate fi portat la o versiune mai veche a grilei pentru Edge:
Revizie: Echipa webformyself.
HTML5 și CSS3 practica de la zero la rezultatul!
Cele mai multe știri IT si dezvoltare web pe canalul nostru-Telegram
