Як притиснути футер до низу
Як змусити підвальну частину сторінки ( «футер») Приклеїтися до нижньої межі вікна - це, напевно, найпоширеніша проблема при верстці сторінок сайту. Рішення, звичайно, є, і їх кілька. Нижче описаний один із способів зробити так, щоб футер завжди був притиснутий до низу сторінки, незалежно від кількості контенту і типу браузера.
Вам знадобиться
- Початкові знання CSS і HTML
Інструкція
1
Як зразок візьмемо одну з найбільш типових схем розбивки сторінки - у неї буде «горище» (заголовок), основний блок і «підвал». Звичайно, при необхідності, в основний блок можна помістити кілька колонок, але тут ми цього робити не будемо, зосередимося тільки не позиціонуванні футера.HTML-код сторінки буде починатися з оголошення специфікації:
між тегами і , крім заголовка сторінки, розмістимо вказівку кодування:А також посилання на зовнішній CSS-файл, який містить опис стилів:Поміщати опис стилів безпосередньо в html-код сторінки ми не будемо, щоб уникнути ускладнень з браузером Opera дев`ятих версій.Между тегами і розмістимо блочну структуру сторінки. Першим, природно, блок заголовка. Йому дамо ідентифікатор header, щоб мати можливість задавати стилі саме для цього блоку:
між тегами і , крім заголовка сторінки, розмістимо вказівку кодування:А також посилання на зовнішній CSS-файл, який містить опис стилів:Поміщати опис стилів безпосередньо в html-код сторінки ми не будемо, щоб уникнути ускладнень з браузером Opera дев`ятих версій.Между тегами і розмістимо блочну структуру сторінки. Першим, природно, блок заголовка. Йому дамо ідентифікатор header, щоб мати можливість задавати стилі саме для цього блоку:
Це header - завжди вгорі вікна.
Це основна частина.
І на завершення - футер:
Це footer - завжди внизу вікна!
Це header - завжди вгорі вікна.
Це основна частина.
Це footer - завжди внизу вікна!
2
Тепер перейдемо до вмісту файлу стилів. У ньому реалізована така схема: основного блоку сторінки буде задана 100% висота, заголовок буде позиціонується абсолютно, а футер - щодо. Щоб заголовок перекривав основний зміст сторінки, це основний зміст поміщено в додатковий блок всередині основного блоку, і цього додаткового блоку заданий відступ зверху, рівний висоті блоку заголовка. А футеру заданий негативний відступ зверху, рівний його висоті - таким способом він буде піднятий над нижньою кромкою вікна на всю свою висоту. Повний вміст css-файлу: * {margin: 0- padding: 0}
html, body {height: 100% -} body {
color: black-
position: relative-
}
#outer {
min-height: 100% -
margin: 0-
background: white-
color: black-
} * Html #outer {height: 100% -}
#header {
position: absolute-
top: 0-
left: 0-
width: 100% -
height: 70px-
background: # 304a00-
overflow: hidden-
color: white-
text-align: center-
} #footer {
position: relative-
margin-top: -50px-
clear: both-
width: 100% -
height: 50px-
background-color: # 304a00-
color: white-
text-align: center-
}
.outerwrap {
float: left-
width: 100% -
padding-top: 71px-
} Цей файл слід зберегти з ім`ям, яке ми вказали в html-коді сторінки - styles.css.
html, body {height: 100% -} body {
color: black-
position: relative-
}
#outer {
min-height: 100% -
margin: 0-
background: white-
color: black-
} * Html #outer {height: 100% -}
#header {
position: absolute-
top: 0-
left: 0-
width: 100% -
height: 70px-
background: # 304a00-
overflow: hidden-
color: white-
text-align: center-
} #footer {
position: relative-
margin-top: -50px-
clear: both-
width: 100% -
height: 50px-
background-color: # 304a00-
color: white-
text-align: center-
}
.outerwrap {
float: left-
width: 100% -
padding-top: 71px-
} Цей файл слід зберегти з ім`ям, яке ми вказали в html-коді сторінки - styles.css.
Статті за темою "Як притиснути футер до низу"
Оцініть, будь ласка статтю
