Как прижать footer (подвал сайта) к низу окна браузера

Как прижать footer (подвал сайта) к низу окна браузера

20 802 в Html5, Css3 30

Приветствую всех посетителей моего блога! В данной заметке затронем тему верстки и разберем как прижать footer (подвал) сайта к низу окна браузера.

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

Давайте же рассмотрим каким образом этого можно добиться средствами html и css. Данный метод, что приведен ниже относится к блочной верстке сайта, т.к. сегодня на таблицах уже никто не верстает, я имею ввиду профессиональных верстальщиков.

Вот как выглядит подвал по умолчанию, т.е. когда на странице мало контента:

Как прижать footer (подал сайта) к низу окна браузера

А вот как должно быть по сути:

Как прижать footer (подал сайта) к низу окна браузера

Я думаю многие согласятся со вторым вариантом, т.к. считается что это более правильный подход в верстке.

Для реализации задуманного создается общий блок «page» в который кладутся все остальные: шапка сайта (header), правая и левая колонки (left, right) и еще какие либо, а вот подвал (footer) остается за пределами данного блока «page».

Теперь перейдем к стилям. Задаем «html» и «body» высоту в 100%, а блоку «page» минимальную высоту также 100%. Таким образом у нас блок «footer» выталкивается за пределы окна браузера и его не будет видно совсем. Чтобы исправить ситуацию мы создаем еще один блок (substrate-footer) равный по высоте блоку подвала, но помещаем его в общий блок  «page», т.е. на то место, где по идее должен был находиться блок footer. Далее отрицательным отступом смещаем блок подвала (footer) вверх. Величина отступа равна высоте блока подвала и блока substrate-footer. После данных манипуляций наш подвал сайта встанет на свое место и будет постоянно находится внизу.

Читайте также:  Препроцессор SASS: пишем стили просто и быстро

Также хотел отметить, что выше блока substrate-footer добавляется очищающий блок «clear». Это необходимо для того, чтобы отменить обтекание блокам «footer» и «substrate-footer», т.к. блокам «left» и «right» задаются свойства float:left и float:right соответственно.

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

HTML:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Подвал по умолчанию</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="page"><!-- Основной блок PAGE -->
<div id="header"><h3>Шапка сайта</h3></div>
<div id="left"><h3>Левая колонка</h3></div>
<div id="right"><h3>Правая колонка</h3></div>
<div id="content">
<h3>Основная колонка с контентом</h3>
<p> Pellentesque vel est id massa varius interdum. Nunc nibh lectus,   fringilla quis scelerisque a, eleifend vitae nibh. Sed hendrerit mauris   quis tortor auctor ut luctus odio malesuada. Praesent facilisis felis   nisi, sed tincidunt erat. Phasellus ornare dignissim orci in   pellentesque. Aliquam dictum diam nec ipsum adipiscing vitae bibendum   tellus faucibus.</p>
<p>Praesent facilisis felis   nisi, sed tincidunt erat. Phasellus ornare dignissim orci in   pellentesque. Aliquam dictum diam nec ipsum adipiscing vitae bibendum   tellus faucibus. </p>
</div>
<div></div><!-- очищающий блок -->
<div id="substrate-footer"></div><!-- блок подложка подвала сайта -->
</div><!-- конец блока PAGE -->

<div id="footer"><!-- подвал сайта -->
<h3>Подвал сайта</h3>
</div>

</body>
</html>

CSS:

html,body {
    margin:0;
    padding:0;
    text-align:center;
    height:100%
}
#page {
    text-align:left;
    margin:0 auto;
    min-height:100%;
    width:960px;
}
#page h3 {text-align:center; margin:0}
#header {
    background-color:#06F;
    height:150px;
    margin:0 0 3px
}
#left {
    background-color:#C93;
    float:left;
    height:100px;
    width:180px;
}
#right {
    background-color:#C93;
    float:right;
    height:100px;
    width:180px;
}
#content {
    margin:0 180px;
    padding:10px
}
.clear {
    clear:both;
    height:0px;
}
#substrate-footer {
    height:100px;
    margin:20px 0 0
}
#footer {
    background-color:#6C9;
    height:100px;
    margin:-100px auto 0;
    width:960px;
}

В заключении хотелось бы сказать, что данному аспекту в верстке шаблона сайта я придаю очень большое значение и даже самый крутой шаблон у которого подвал не остается прижат к низу мне кажется не серьезным. Поэтому я всем верстальщикам советую обратить внимание на данный момент.

Читайте также:  Что нового в Bootstrap 5?

А на этом все. Встретимся в следующих постах. Пока…

Оцените пост
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5 (14 оценок, среднее: 2,14 из 5)
Загрузка...
Заур Магомедов
Заур Магомедов
Занимаюсь созданием сайтов с 2009 года. Постоянно обучаюсь и совершенствуюсь, шагая в ногу со временем. Владею такими навыками, как: Html5, Css3, JavaScript, Vue, Git, БЭМ, Gulp.
Другие материалы той же категории