Prese subsol (subsol), în partea de jos a paginii

Tag-uri: css, html, poziția, de jos, subsol

Destul de des este nevoie să apăsați subsol în partea de jos a paginii, chiar dacă înălțimea conținutului site-ului este mai mică decât înălțimea ecranului. Acest lucru ne va ajuta astfel de proprietăți excelente, cum ar fi poziția, și de jos.

La prima vedere, sarcina este foarte simplu - doar a pus un div în partea de jos a paginii. Cu toate acestea, este în valoare de având în vedere că conținutul conținut poate fi mai mică decât o pagină.

Să începem cu foarte simplu, să spunem că avem

subsol cu conținut:

Acest subsol este necesar pentru a pune înaintea etichetei de închidere . fără a pune-l mai departe spre interior Divov altele.

Iată cum va arăta un stil CSS pentru acest subsol. că el a fost întotdeauna fixat în partea de jos a paginii

mărci de poziționare absolută

plasat pe pagina, ignorând complet celelalte elemente. și coordonatele din stânga jos sunt pe ecranul divei.

Se pare că totul - subsol este presată pe partea de jos a paginii atunci când umplere conținut este mai mică decât înălțimea paginii, se pare ca ar trebui. Dar nu, veți observa, dacă pagina întregul conținut mai mare decât înălțimea ecranului, partea a conținutului vor fi ascunse în subsol, toate pentru că poziția absolută are efectul de a ignora celelalte elemente, și, probabil, va avea un loc gol în pivniță.

Pentru a scăpa de aceste două probleme, trebuie să faci pentru a adăuga un stil CSS pentru tag-ul, da, . și nu . în caz contrar nu va funcționa așa cum trebuie, acest lucru va arata ca acest stil:

Ar trebui să fie conștienți de faptul că poziționarea absolută depinde de poziționarea elementului mamă. Astfel, dacă părinte element de poziționare relativă. numărătoarea de coordonate este în raport cu marginile elementului mamă. Este nevoie de înălțimea minimă, în cazul în care conținutul este mai mică decât înălțimea ecranului, la subsol au fost chiar la partea de jos.

Problema cu conținut de suprapunere subsol este rezolvată în diferite moduri, dar cel mai bine, în opinia mea, adăugați o etichetă Valoarea padding mai jos, egală sau ușor mai mare decât înălțimea de subsol la conținutul nu este strâns aderat la subsol, despre stilul:

Acum, toate subsol va fi întotdeauna în partea de jos, nu va face să apară bara de defilare, în cazul în care conținutul este mai mic. Pur și simplu pune, este o metodă universală. Acum, eu voi da câteva exemple de utilizare a acestei metode este că sunteți convinși de acțiunea sa.

Avem aproximativ următorul cod HTML:

Și acest cod CSS:

Iată cum va arăta este tot în cazul în care conținutul este mai mică decât înălțimea ecranului:

Aici este un exemplu al modului în care site-ul va arăta dacă înălțimea conținutul site-ului mai mare a ecranului (singura diferență este în codul HTML, adăugat câteva paragrafe de text):