Прижать футер к низу страницы средствами JavaScript

Разметка сайта

Есть много разных способов заставить футер находится в низу страницы. Я предлагаю свой личный, всего в несколько строк JavaScript-кода.

Появилась вторая версия этой статьи!!!
Прижать футер к низу страницы средствами JavaScript ver. 2.0

Изначально давайте рассмотрим разметку:

Такая разметка чаще всего встречается в проектах, и такое расположение блоков является наиболее семантическим.
И так как же прижать футер к низу страницы?! (Сразу оговариваюсь, в данном случае я буду прижимать именно к низу страницы а не окна браузера, не путайте пожалуйста.)
При такой разметке можно попытаться прижать футер к низу с помощью css:

body
{
height:100%;
width:100%;
min-height:100%;
}
header
{
width:100%;
height:300px;
}
section#content
{
width:100%;
min-height:100px;
height:100%;
}
footer
{
width:100%;
height:100px;
}

в таком варианте #content растягивается на всю высоту браузера и выталкивает футер на высоту header.
Можно перестроить позиционирование:

body
{
height:100%;
width:100%;
min-height:100%;
}
header
{
width:100%;
height:300px;
}
section#content
{
width:100%;
min-height:100px;
height:100%;
}
footer
{
width:100%;
height:100px;
position:absolute;
bottom:0;
}

Но в таком случае footer будет располагаться внизу окна браузера. Что то же не удовлетворяет условиям.

Ну и в конце концов пришло решение с использованием JavaScript:

(function() { // Определить анонимную функцию.
var viewportHeight = window.innerHeight-410; /*вычисление высоты рабочей области окна и вычитание высоты footer и header и всех mardgin у footer, header, #content */
document.getElementById('content').style.height = viewportHeight+'px'; // Устанавливаем высоту контента
})( ); // Конец определения функции и ее вызов.

с таким css стилем:

body
{
height:auto !important;
height:100%;
width:100%;
min-height:100%;
}
header
{
height:215px;
width:100%;
}
content
{
min-height:200px;
position:relative;
margin-top:11px;
}
footer
{
height:63px;
margin-top:105px;
}

Вот и все! Отлично работает, растягивает #content до нужной величины, а при увлечении высоты внутри #content сам #content тоже увеличивает высоту и footer благополучно сдвигается вниз.

Появилась вторая версия этой статьи!!!
Прижать футер к низу страницы средствами JavaScript ver. 2.0

2 комментария: Прижать футер к низу страницы средствами JavaScript

  1. The blog is cool

  2. admin

    Появилась вторая версия этой статьи!!!
    Прижать футер к низу страницы средствами JavaScript ver. 2.0

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*


девять × 7 =

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Получать новые комментарии по электронной почте.