Доброго времени суток, гики верстки и мои верные подписчики. Посмотрев на многочисленные вопросы и проблемы с реализацией одного элемента, я решил написать статью, которая должна вам помочь избежать той же участи. А этим непокорным является «подвал» сайтов, который вечно у начинающих разработчиков вызывает вопрос: «Как же прижать футер к низу страницы?».
Поэтому в сегодняшней публикации вы найдете описание нескольких способов реализации данного механизма при помощи не только привычных вам html5 и css, а еще скриптовых языков и фреймворков таких, как bootstrap. Не буду вас больше томить, приступаем к разбору полетов!
Что называют «подвалом» сайта?
Обычно так называют нижнюю часть веб-страниц, в которой находится правовая информация о владельце, год создания сайта, меню, которое дублируется, контакты компании или другие данные, которые не являются ключевыми. Футеры используются и в динамических сайтах, и в статических.
В html5 появился отдельный тег footer>, который отвечает за данный параметр. С его помощью легче не только разобрать код. Он упрощает работу поисковых роботов и программ.
Создание футера при помощи средств css
Для начала я расскажу о более простых способах реализации прижатого «подвала» к низу страницы. К ним относятся примеры, созданные при помощи одних только средств html-разметки и css стилей.
Первый вариант
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | <html>
<head>
<style>
body {
height: 100%;
margin: 0;
background-image: url(https://shugaev.su/wp-content/uploads/2015/07/6.jpg);
background-size:cover;
text-align: center;
background-attachment: fixed;
}
/*Благодаря первым двум строкам «подвал прижимается к нижнему краю веб-странички»*/
.all{
min-height: 100%;
position: relative;
width:76%;
border: 3px double #0CDCDC;
margin-left: 12%;
background-color: rgba(73, 129, 184, .84);
}
.content {
padding-bottom: 90px;
}
header{
color: #FF0010;
border-bottom: 2px solid;
}
footer {
left: 0;
position: absolute;
bottom: 0;
width: 100%;
height: 70px;
background: rgba(249,254,254,.52);
padding: 6px;
border-top: 1px solid #0CDCDC;
}
img {
margin: 7px;
box-shadow: 0 0 17px #001100, 0 3px 37px #191871 ;
}
</style>
</head>
<body>
<div class="all">
<header>
<h1>Акционная распродажа к концу лета!</h1>
</header>
<div class="content">
<h2>Приобретайте летнюю и пляжную одежду в полцены!</h2>
<p>В данном абзаце написано очень много текстового контента в качестве примера.</p>
<p><img src="http://womanadvice.ru/sites/default/files/plyazhnaya_odezhda_kupalniki_leto_2015.png" alt="Купальник"></p>
</div>
<footer>
Сайт принадлежит компании "*****", которая основана в 1997 году.
</footer>
</div>
</body>
</html> |
Второй вариант с параметрами Flexbox
Второй пример несколько изменен. В нем я использую Flexbox, который считается более современным средством.
Сама по себе flex-верстка – это гибкое расположение всех объектов на страницах веб-ресурсов для их оптимального использования доступного пространства.
Огромным преимуществом такой технологии является возможность расположение объектов не только по направлению сверху вниз, а еще и слева направо, снизу вверх и справа налево. За это отвечает flex-direction.
Стоит еще сказать и за flex. Это универсальный параметр, который включает в себя:
- flex-grow – отвечает за расширение элементов-наследников,
- flex-shrink – указывает сжатие дочерних объектов,
- flex-basis – определяет занимаемое место конкретного элемента перед последующим размещением всех объектов страницы.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 | <html>
<head>
<style>
body {
height: 100%;
margin: 0;
background-image: url(https://shugaev.su/wp-content/uploads/2015/07/6.jpg);
background-size:cover;
text-align: center;
background-attachment: fixed;
}
.all{
display: flex;
flex-direction: column;
width:76%;
border: 4px double #0CDCDC;
margin-left: 12%;
background-color: rgba(73, 129, 184, .84);
}
.content {
flex: 1 0 auto;
}
header{
color: #FF0010;
border-bottom: 2px solid;
}
footer {
flex: 0 0 auto;
background: rgba(249,254,254,.52);
padding: 27px 6px;
border-top: 1px solid #0CDCDC;
}
img {
margin: 7px;
box-shadow: 0 0 17px #001100, 0 3px 37px #191871 ;
}
</style>
</head>
<body>
<div class="all">
<header>
<h1>Акционная распродажа к концу лета!</h1>
</header>
<div class="content">
<h2>Приобретайте летнюю и пляжную одежду в полцены!</h2>
<p>В данном абзаце написано очень много текстового контента в качестве примера.</p>
<p><img src="http://womanadvice.ru/sites/default/files/plyazhnaya_odezhda_kupalniki_leto_2015.png" alt="Купальник"></p>
</div>
<footer>
Сайт принадлежит компании "*****", которая основана в 1996 году.
</footer>
</div>
</body>
</html> |
Третий вариант с табличными преобразованиями
Третий пример отличается от предыдущих тем, что высота «подвала» не важна, а основной блок «all» превращается в некое подобие таблицы. Такой эффект достигается за счет свойств
display: table и table-row
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | <html>
<head>
<style>
body {
height: 100%;
margin: 0;
background-image: url(https://shugaev.su/wp-content/uploads/2015/07/6.jpg);
background-size:cover;
text-align: center;
background-attachment: fixed;
}
.all{
display: table;
height: 100%;
width:76%;
border: 4px double #0CDCDC;
margin-left: 12%;
background-color: rgba(73, 129, 184, .84);
}
.content {
display: table-row;
height: 100%;
}
header{
color: #FF0010;
border-bottom: 2px solid;
}
footer {
background: rgba(249,254,254,.52);
margin-top: 13px;
padding: 27px 6px;
border-top: 1px solid #0CDCDC;
}
img {
margin: 7px;
box-shadow: 0 0 17px #001100, 0 3px 37px #191871 ;
}
</style>
</head>
<body>
<div class="all">
<header>
<h1>Акционная распродажа к концу лета!</h1>
</header>
<div class="content">
<h2>Приобретайте летнюю и пляжную одежду в полцены!</h2>
<p>В данном абзаце написано очень много текстового контента в качестве примера.</p>
<p><img src="http://womanadvice.ru/sites/default/files/plyazhnaya_odezhda_kupalniki_leto_2015.png" alt="Купальник"></p>
</div>
<footer>
Сайт принадлежит компании "*****", которая основана в 1996 году.
</footer>
</div>
</body>
</html> |
Четвертый вариант с уловкой
Иногда используют и способ с отрицательным внешним отступом. Для этого Основной слой и блок с контентом занимают все 100% вкладки, а footer-у задают фиксированное значение высоты и после margin-top: — эта_высота. Но я такой способ не приветствую. Он очень корявый и однозначно проигрывает всем перечисленным выше.
Данные варианты решений можно применять на любых движках, в том числе и joomla, и для любых веб-сервисов.
Немного хитростей от JavaScript и jQuery
Если же по каким-то причинам прошлые примеры вас не спасли, то на помощь спешат js и jQuery. Для прошлых примеров вместо тех добавленных свойств можно вписать простенькую скриптовую функцию. Она вытаскивает значение высоты футера и шапки, после отнимает их от размера всего окна.
Таким образом получается оптимальное значение высоты для веб-контента. Как видите, очень простенькая функция, но действенная.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | <html>
<head>
<style>
body {
height: 100%;
margin: 0;
background-image: url(https://shugaev.su/wp-content/uploads/2015/07/6.jpg);
background-size:cover;
text-align: center;
background-attachment: fixed;
}
.all{
display: table;
height: 100%;
width:76%;
border: 4px double #0CDCDC;
margin-left: 12%;
background-color: rgba(73, 129, 184, .84);
}
.content {
display: table-row;
height: 100%;
}
header{
color: #FF0010;
border-bottom: 2px solid;
}
footer {
background: rgba(249,254,254,.52);
margin-top: 13px;
padding: 27px 6px;
border-top: 1px solid #0CDCDC;
}
img {
margin: 7px;
box-shadow: 0 0 17px #001100, 0 3px 37px #191871 ;
}
</style>
</head>
<body>
<div class="all">
<header>
<h1>Акционная распродажа к концу лета!</h1>
</header>
<div class="content">
<h2>Приобретайте летнюю и пляжную одежду в полцены!</h2>
<p>В данном абзаце написано очень много текстового контента в качестве примера.</p>
<p><img src="http://womanadvice.ru/sites/default/files/plyazhnaya_odezhda_kupalniki_leto_2015.png" alt="Купальник"></p>
</div>
<footer>
Сайт принадлежит компании "*****", которая основана в 1996 году.
</footer>
</div>
</body>
</html> |
Теперь вы знаете все популярные способы прижатия футера к нижнему краю веб-страниц.
Надеюсь, вам понравилась публикация. А если это так, то подписывайтесь на обновления моего блога и делитесь полученными знаниями с коллегами и друзьями. До новых встреч! Пока-пока!
С уважением, Роман Чуешов
