Ինչպես անել, որ էջի ստորոտի մասը («տողատակ») մնա պատուհանի ներքևի եզրին. Սա երևի կայքի էջերի դասավորության ամենատարածված խնդիրն է: Լուծումներ, իհարկե, կան, և դրանք մի քանիսն են: Ստորև բերված է այն եղանակը, որպեսզի համոզվեք, որ տողատակը միշտ սեղմված է էջի ներքևում ՝ անկախ բովանդակության քանակից և զննարկչի տեսակից:
Դա անհրաժեշտ է
CSS- ի և HTML- ի հիմնական գիտելիքներ
Հրահանգներ
Քայլ 1
Որպես օրինակ վերցնենք էջանշման առավել տիպային սխեմաներից մեկը. Այն կունենա ձեղնահարկ (վերնագիր), հիմնական բլոկ և տողատակ: Իհարկե, անհրաժեշտության դեպքում, հիմնական բլոկում կարող եք տեղադրել մի քանի սյունակ, բայց մենք դա այստեղ չենք անի, մենք կենտրոնանալու ենք միայն էջատակը չտեղակայելու վրա: Էջի HTML կոդը կսկսվի հստակեցման հայտարարագրով.
Պիտակների միջև և էջի վերնագրից բացի մենք կտեղադրենք կոդավորման ցուցում. Ինչպես նաև հղում դեպի արտաքին CSS ֆայլ, որը պարունակում է ոճերի նկարագրություն. @Import "styles.css"; Մենք չենք տեղադրի ոճերի նկարագրություն ուղղակիորեն էջի html- կոդի մեջ `իններորդ տարբերակի Opera բրաուզերի հետ բարդություններից խուսափելու համար: Պիտակների միջև տեղադրեք էջի բլոկային կառուցվածքը: Առաջինը, իհարկե, վերնագրի բլոկն է: Մենք նրան կտանք վերնագրի նույնացուցիչը, որպեսզի կարողանա ոճեր սահմանել այս որոշակի բլոկի համար.
Այս վերնագիրը միշտ պատուհանի վերևում է:
Հետո ՝ էջի հիմնական բլոկը: Այն բաղկացած կլինի երկու բնադրվածներից `արտաքին (նույնացուցիչ - արտաքին) և ներքին (նույնացուցիչ - արտաքին փաթաթում).
Սա է հիմնական մասը:
Եվ վերջապես, տողատակը.
Դա տողատակն է ՝ միշտ պատուհանի ներքևում:
Ամբողջ էջը կտեսնի այսպես.
Ինչպես սեղմել տողատակը
@import "styles.css";
Այս վերնագիրը միշտ պատուհանի վերևում է:
Սա է հիմնական մասը:
Դա տողատակն է ՝ միշտ պատուհանի ներքևում:
Քայլ 2
Հիմա անցնենք ոճաթերթի բովանդակությանը: Այն իրականացնում է հետևյալ սխեման. Հիմնական էջի բլոկը կսահմանվի 100% բարձրության վրա, վերնագիրը կտեղադրվի բացարձակապես, և տողատակը կլինի համեմատաբար: Որպեսզի վերնագիրը չհամընկնի էջի հիմնական բովանդակության հետ, այս հիմնական բովանդակությունը տեղադրվում է հիմնական տուփի մեջ լրացուցիչ տուփի մեջ, և այս լրացուցիչ տուփը դրվում է վերին լուսանցքի հավասար է վերնագրի տուփի բարձրությանը: Եվ տողատակին տրվում է վերին բացասական լուսանցք, որը հավասար է իր բարձրությանը. Այսպիսով այն կբարձրացվի պատուհանի ներքևի եզրից մինչև իր ամբողջ բարձրությունը: Css ֆայլի ամբողջական բովանդակությունը ՝ * {margin: 0; լիցքավորում ՝ 0}
html, մարմին {բարձրություն ՝ 100%;} մարմին {
գույնը `սև;
դիրքը ՝ հարաբերական;
}
# տարի {
min- բարձրությունը `100%;
լուսանցք ՝ 0;
ֆոն `սպիտակ;
գույնը `սև;
} * html #outer {բարձրությունը `100%;}
# վերնագիր {
դիրքը ՝ բացարձակ;
վերև ՝ 0;
ձախ: 0;
լայնությունը `100%;
բարձրությունը `70px;
ֆոն `# 304a00;
վարարում ՝ թաքնված;
գույնը `սպիտակ;
տեքստի հավասարեցում. կենտրոն;
} #footer {
դիրքը ՝ հարաբերական;
margin-top: -50 px;
պարզ: երկուսն էլ;
լայնությունը `100%;
բարձրությունը `50px;
ֆոնային գույն ՝ # 304a00;
գույնը `սպիտակ;
տեքստի հավասարեցում. կենտրոն;
}
.բուսաբուծություն {
բոց `ձախ;
լայնությունը `100%;
լցոնման գագաթ. 71px;
} Այս ֆայլը պետք է պահվի այն անունով, որը մենք նշել ենք էջի html- կոդում `styles.css:
