Cum se face ca partea de subsol a paginii („subsol”) să se lipească de marginea de jos a ferestrei - aceasta este probabil cea mai frecventă problemă în aspectul paginilor site-ului. Există, desigur, soluții și există mai multe dintre ele. Mai jos este o modalitate de a vă asigura că subsolul este întotdeauna apăsat în partea de jos a paginii, indiferent de cantitatea de conținut și de tipul de browser.
Este necesar
Cunoștințe de bază despre CSS și HTML
Instrucțiuni
Pasul 1
Să luăm ca exemplu unul dintre schemele de paginare mai tipice - va avea o mansardă (antet), un bloc principal și un subsol. Desigur, dacă este necesar, puteți pune mai multe coloane în blocul principal, dar nu vom face acest lucru aici, ne vom concentra doar pe a nu poziționa subsolul. Codul HTML al paginii va începe cu declarația specificației:
Între etichete și, pe lângă titlul paginii, vom plasa o indicație a codificării: precum și un link către un fișier CSS extern care conține o descriere a stilurilor: @import "styles.css"; Nu vom plasa descrierea stilurilor direct în codul html al paginii pentru a evita complicațiile cu browserul Opera din cea de-a noua versiune. Între etichete și plasați structura de bloc a paginii. Primul, desigur, este blocul de titlu. Îi vom da identificatorul de antet pentru a putea seta stiluri pentru acest bloc special:
Acest antet este întotdeauna în partea de sus a ferestrei.
Apoi - blocul principal al paginii. Acesta va consta din două imbricate - exterior (identificator - exterior) și interior (identificator - înveliș exterior):
Aceasta este partea principală.
Și, în cele din urmă, subsolul:
Este subsol - întotdeauna în partea de jos a ferestrei!
Pagina completă va arăta astfel:
Cum să apăsați pe subsol
@import "styles.css";
Acest antet este întotdeauna în partea de sus a ferestrei.
Aceasta este partea principală.
Este subsol - întotdeauna în partea de jos a ferestrei!
Pasul 2
Acum să trecem la conținutul foii de stil. Implementează următoarea schemă: blocul paginii principale va fi setat la 100% înălțime, titlul va fi poziționat absolut și subsolul va fi relativ. Pentru a preveni suprapunerea titlului de conținutul principal al paginii, acest conținut principal este plasat într-o casetă suplimentară din caseta principală, iar această casetă suplimentară este setată la o marjă superioară egală cu înălțimea casetei de titlu. Iar subsolului i se acordă o marjă superioară negativă egală cu înălțimea sa - în acest fel va fi ridicată deasupra marginii inferioare a ferestrei la înălțimea maximă. Conținutul complet al fișierului css: * {margin: 0; umplutură: 0}
html, corp {înălțime: 100%;} corp {
culoarea neagra;
poziție: relativă;
}
#exterior {
min-înălțime: 100%;
marja: 0;
fundal: alb;
culoarea neagra;
} * html #outer {înălțime: 100%;}
#antet {
poziție: absolută;
sus: 0;
stânga: 0;
lățime: 100%;
înălțime: 70px;
fundal: # 304a00;
overflow: ascuns;
culoare albă;
text-align: centru;
} #subsol {
poziție: relativă;
marginea-sus: -50px;
clar: ambele;
lățime: 100%;
înălțime: 50px;
culoare de fundal: # 304a00;
culoare albă;
text-align: centru;
}
.outerwrap {
plutește la stânga;
lățime: 100%;
căptușeală: 71px;
} Acest fișier trebuie salvat cu numele pe care l-am specificat în codul html al paginii - styles.css.
