Как «прилепить» (закрепить) футер к низу страницы

11 июля, 2014 Максим Метелев 13568 просмотров 1 комментарий

На большинстве сайтов, которые нам нравятся часто можно увидеть фикированный футер (подвал) и хедер (верхняя часть сайта).

Смотрятся они просто классно, когда вы скролите мышкой к низу страницы хедер и футер «путешествуют» вместе с вами.

Что то вроде плавающего блока на сайте. Сегодня в этой заметке я поговорю о том, как прилепить футер к низу страницы.

Также вам интересно будет ознакомиться с заметкой — плавающий виджет в сайдбаре

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

Исходный код html:

<!—Начало плавающего хедера -->
<div id="header_container">
    <div id="header">
        Заголовок хедера
    </div>
</div>
<!—Конец плавающего хедера -->
 
<!—Начало страницы с контентом -->
<div id="container">
    <div id="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet ipsum magna, et convallis sem. Nunc pulvinar magna vitae orci malesuada blandit. Proin ac purus dui. Suspendisse venenatis egestas egestas. Sed tincidunt diam et massa convallis et mollis enim malesuada. Nullam eget metus nunc, eget imperdiet urna. Quisque vehicula ipsum non sapien vulputate convallis quis quis ligula. Aenean gravida mollis blandit. Nullam lacus tortor, viverra a auctor ac, porta eget neque. Duis placerat mi metus, a gravida quam.
        <br /><br />
        Nam ut augue mauris, at dapibus quam. Pellentesque eu nunc enim. Proin facilisis, dolor nec sollicitudin mattis, sem velit mollis sem, sagittis sagittis libero ante id nunc. Nam congue, mauris non porttitor convallis, purus elit faucibus nunc, in mollis sem lorem eu tortor. Cras nec justo id libero fringilla placerat ac et leo. Mauris ac vehicula odio. Cras augue erat, sodales vel porttitor ut, scelerisque nec justo. Praesent vitae lorem erat. Suspendisse elementum tortor vitae diam venenatis eget fermentum lacus suscipit. Quisque varius vulputate tempus.
        ...
    </div>
</div>
<!—Конец страницы с контентом -->
 
<!—Начало плавающего футера -->
<div id="footer_container">
    <div id="footer">
        Содержимое футера
    </div>
</div>
<!—Конец плавающего футера -->

<!—Начало плавающего хедера -->

Заголовок хедера

</div>

<!—Конец плавающего хедера -->

<!—Начало страницы с контентом -->

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet ipsum magna, et convallis sem. Nunc pulvinar magna vitae orci malesuada blandit. Proin ac purus dui. Suspendisse venenatis egestas egestas. Sed tincidunt diam et massa convallis et mollis enim malesuada. Nullam eget metus nunc, eget imperdiet urna. Quisque vehicula ipsum non sapien vulputate convallis quis quis ligula. Aenean gravida mollis blandit. Nullam lacus tortor, viverra a auctor ac, porta eget neque. Duis placerat mi metus, a gravida quam.

Nam ut augue mauris, at dapibus quam. Pellentesque eu nunc enim. Proin facilisis, dolor nec sollicitudin mattis, sem velit mollis sem, sagittis sagittis libero ante id nunc. Nam congue, mauris non porttitor convallis, purus elit faucibus nunc, in mollis sem lorem eu tortor. Cras nec justo id libero fringilla placerat ac et leo. Mauris ac vehicula odio. Cras augue erat, sodales vel porttitor ut, scelerisque nec justo. Praesent vitae lorem erat. Suspendisse elementum tortor vitae diam venenatis eget fermentum lacus suscipit. Quisque varius vulputate tempus.

...

</div>

<!—Конец страницы с контентом -->

<!—Начало плавающего футера -->

Содержимое футера

</div>

<!—Конец плавающего футера -->

А вот исходник файла стилей CSS:

/* Обнуляем margin и padding */
body { margin:0; padding:0; }
 
/* Делаем прилипающий хедер */
#header_container { background:#eee; border:1px solid #666; height:60px; left:0; position:fixed; width:100%; top:0; }
#header{ line-height:60px; margin:0 auto; width:940px; text-align:center; }
 
/* CSS for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content.*/
#container { margin:0 auto; overflow:auto; padding:80px 0; width:940px; }
#content{}
 
/* Делаем прилипающий футер */
#footer_container { background:#eee; border:1px solid #666; bottom:0; height:60px; left:0; position:fixed; width:100%; }
#footer { line-height:60px; margin:0 auto; width:940px; text-align:center; }

/* Обнуляем margin и padding */

body { margin:0; padding:0; }

/* Делаем прилипающий хедер */

#header_container { background:#eee; border:1px solid #666; height:60px; left:0; position:fixed; width:100%; top:0; }

#header{ line-height:60px; margin:0 auto; width:940px; text-align:center; }

/* CSS for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content.*/

#container { margin:0 auto; overflow:auto; padding:80px 0; width:940px; }

#content{}

/* Делаем прилипающий футер */

#footer_container { background:#eee; border:1px solid #666; bottom:0; height:60px; left:0; position:fixed; width:100%; }

#footer { line-height:60px; margin:0 auto; width:940px; text-align:center; }

А теперь нам нужно соединить исходный код html и файл стилей. Еще раз напоминаю, что соединяться с каскадными таблицами стилей мы будем через конструкцию <style></style> поместив между ними код выше. Вот что получится у вас в итоге:

<!DOCTYPE html>
<html>
<head>
<title>Sticky Header and Footer</title>
<style type="text/css">
/* Reset body padding and margins */
body { margin:0; padding:0; }
 
/* Make Header Sticky */
#header_container { background:#eee; border:1px solid #666; height:60px; left:0; position:fixed; width:100%; top:0; }
#header{ line-height:60px; margin:0 auto; width:940px; text-align:center; }
 
/* CSS for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content.*/
#container { margin:0 auto; overflow:auto; padding:80px 0; width:940px; }
#content{}
 
/* Make Footer Sticky */
#footer_container { background:#eee; border:1px solid #666; bottom:0; height:60px; left:0; position:fixed; width:100%; }
#footer { line-height:60px; margin:0 auto; width:940px; text-align:center; }
</style>
</head>
<body>
<!-- BEGIN: Sticky Header -->
<div id="header_container">
    <div id="header">
        Header Content
    </div>
</div>
<!-- END: Sticky Header -->
 
<!-- BEGIN: Page Content -->
<div id="container">
    <div id="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet ipsum magna, et convallis sem. Nunc pulvinar magna vitae orci malesuada blandit. Proin ac purus dui. Suspendisse venenatis egestas egestas. Sed tincidunt diam et massa convallis et mollis enim malesuada. Nullam eget metus nunc, eget imperdiet urna. Quisque vehicula ipsum non sapien vulputate convallis quis quis ligula. Aenean gravida mollis blandit. Nullam lacus tortor, viverra a auctor ac, porta eget neque. Duis placerat mi metus, a gravida quam.
        <br /><br />
        Nam ut augue mauris, at dapibus quam. Pellentesque eu nunc enim. Proin facilisis, dolor nec sollicitudin mattis, sem velit mollis sem, sagittis sagittis libero ante id nunc. Nam congue, mauris non porttitor convallis, purus elit faucibus nunc, in mollis sem lorem eu tortor. Cras nec justo id libero fringilla placerat ac et leo. Mauris ac vehicula odio. Cras augue erat, sodales vel porttitor ut, scelerisque nec justo. Praesent vitae lorem erat. Suspendisse elementum tortor vitae diam venenatis eget fermentum lacus suscipit. Quisque varius vulputate tempus.
        ...
    </div>
</div>
<!-- END: Page Content -->
 
<!-- BEGIN: Sticky Footer -->
<div id="footer_container">
    <div id="footer">
        Footer Content
    </div>
</div>
<!-- END: Sticky Footer -->
</body>
</html>