Как да направите долния колонтитул част от страницата („долен колонтитул“) да се придържа към долната граница на прозореца - това е може би най-често срещаният проблем при оформлението на страниците на сайта. Има, разбира се, решения и има няколко от тях. По-долу има един начин да се уверите, че долният колонтитул винаги е притиснат в долната част на страницата, независимо от количеството съдържание и вида на браузъра.
Необходимо е
Основни познания по CSS и HTML
Инструкции
Етап 1
Нека вземем за пример една от най-типичните схеми за разбиване на страници - тя ще има таванско помещение (хедър), основен блок и долен колонтитул. Разбира се, ако е необходимо, можете да поставите няколко колони в основния блок, но ние няма да направим това тук, ние ще се съсредоточим само върху непозиционирането на долния колонтитул. HTML кодът на страницата ще започне с декларацията на спецификацията:
Между етикетите и, в допълнение към заглавието на страницата, ще поставим индикация за кодирането: Както и връзка към външен CSS файл, съдържащ описание на стилове: @import "styles.css"; Няма да поставим описание на стилове директно в html-кода на страницата, за да се избегнат усложнения с браузъра Opera от деветата версия. Между таговете и поставете блоковата структура на страницата. Първият, разбира се, е заглавният блок. Ще му дадем идентификатора на заглавката, за да може да задава стилове за този конкретен блок:
Този хедър е винаги в горната част на прозореца.
След това - основният блок на страницата. Той ще се състои от две вложени - външна (идентификатор - външна) и вътрешна (идентификатор - външна обвивка):
Това е основната част.
И накрая, долният колонтитул:
Долен колонтитул - винаги в долната част на прозореца!
Цялата страница ще изглежда така:
Как да натиснете долния колонтитул
@import "styles.css";
Този хедър е винаги в горната част на прозореца.
Това е основната част.
Долен колонтитул - винаги в долната част на прозореца!
Стъпка 2
Сега да преминем към съдържанието на таблицата със стилове. Той изпълнява следната схема: основният блок на страницата ще бъде зададен на 100% височина, заглавието ще бъде абсолютно позиционирано и долният колонтитул ще бъде относително. За да се предотврати припокриването на заглавието с основното съдържание на страницата, това основно съдържание се поставя в допълнително поле в рамките на основното поле и това допълнително поле се задава в горния поле, равно на височината на полето на заглавието. И долният колонтитул получава отрицателно горно поле, равно на височината му - по този начин той ще бъде издигнат над долния ръб на прозореца до пълната му височина. Пълно съдържание на css файла: * {margin: 0; подплата: 0}
html, тяло {височина: 100%;} тяло {
цвят черен;
позиция: относителна;
}
#outer {
мин-височина: 100%;
марж: 0;
фон: бял;
цвят черен;
} * html #outer {височина: 100%;}
#header {
позиция: абсолютна;
отгоре: 0;
ляво: 0;
ширина: 100%;
височина: 70px;
фон: # 304a00;
преливане: скрито;
цвят: бял;
подравняване на текст: център;
} #footer {
позиция: относителна;
margin-top: -50px;
ясно: и двете;
ширина: 100%;
височина: 50px;
фон-цвят: # 304a00;
цвят: бял;
подравняване на текст: център;
}
.outerwrap {
плувка: ляво;
ширина: 100%;
подложка: 71px;
} Този файл трябва да бъде записан с името, което сме посочили в html-кода на страницата - styles.css.
