Как прижать футер к низу страницы. Как растянуть блок div по высоте.

Добрый день, уважаемые посетители моего блога. Сегодня поговорим о двух распространенных проблемах, с которыми сталкиваются верстальщики при верстке макетов сайтов. Одной из проблем является задача прижатия футера к низу экрана. Суть задачи состоит в том, чтобы при различных разрешениях монитора футер был прижат к низу окна браузера в случае, когда средняя (контентная) часть сайта содержит небольшой объем контента.

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

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

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

footer-vniz

Прижимаем футер к низу страницы.

Исходно имеем некую html страницу представленную кодом:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <style type="text/css">
 body, html{ padding:0; margin:0;}
 body {background:#ddd;}
 #wrapper{ width:200px; margin:auto;}
 #header{ background:#CC3366; width:100%; height:50px;}
 #content{ width:100%; background:#fff; }
 #footer{ width:100%; background:#000; color:#fff; height:50px;}

 </style>
</head>

<body>
<div id="wrapper">
 <div id="header">
 шапка
 </div>
 <div id="content">
 основной текст сайта
 </div>
 <div id="footer">
 подвал
 </div>
</div>

</body>
</html>

контейнер body имеет серый цвет, внутри него лежит обертка (#wrapper) шириной 200 пикселов, равнение по центру. Внутри обертки последовательно сверху вниз расположены три блока: #header - шапка, розового цвета; #content - содержательная часть сайта с фоном белого цвета; #footer - подвал черного цвета. Высота шапки и подвала принята 50 пикселов. Высота контентной части варьируется по содержимому. Визуально это выглядит следующим образом.

14.08

Для начала нужно вынести блок футера за пределы обертки (#wrapper). Затем для контейнеров html, body, #wrapper установить высоту 100% (height: 100%). После этого появится полоса прокрутки, а футер будет расположен ниже видимой части окна браузера.

Чтобы уйти от этого недоразумения, установим для футера отрицательный межблочный отступ по вертикали равный высоте футера (margin:-50px auto; - смещаем вверх на 50 пикс. и выравниваем по центру). Теперь у нас футер наползает на блок обертки и на блок контента в случае если высота соответствует. Сделаем для блока контента внутриблочный отступ снизу 50px, теперь все выглядит красиво.

Пока этот вариант работает в "правильных" браузерах (я проверял в opera, firefox, google chrome и IE 8). В недобраузере ИЕ 6 не проверял работоспособность, в ИЕ 7 по идее должно работать.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <style type="text/css">
 body, html{ padding:0; margin:0; height: 100%;}
body {
 background:#ddd;
 min-height: 100%;
 height: 100%;
 position: relative;
}
 #wrapper{ width:200px; margin:auto; height:100%;}
 #header{ background:#CC3366; width:100%; height:50px;}
 #content{ width:100%; background:#fff; padding-bottom:50px; }
 #footer{ width:200px; margin:-50px auto; background:#000; color:#fff; height:50px;}

 </style>
</head>

<body>
<div id="wrapper">
 <div id="header">
 шапка
 </div>
 <div id="content">
 основной текст сайта
 </div>

</div>
<div id="footer">
 подвал
 </div>
</body>
</html>

Как растянуть блок div по высоте родительского блока

Собственно мы уже это сделали, блок #wrapper растянут по высоте на 100% контейнера body. Проблема заключается немного в другом, на рисунке ниже видно, что белый фон контента не дотягивается до футера, а между контентом и футером появился серый фон. Чтобы этого избежать можно задать для обертки такой же цвет как и для блока контента (#wrapper{ background:#fff;}).

23.08

UPD: 3.04.2014

Образовался некий, якобы пробел в подаче информации. Попытаюсь заполнить. Суть в том, что в комментах есть замечания на тему что контент не растянут как обещалось. Во-первых в статье нет речи о том, что нужно ратягивать блок контента. Во-вторых в статье блок wrapper растянут на высоту блока body, о чем сказанно в заголовке (как растянуть блок по высоте), что и требовалось доказать. Решать некую универсальную задачу я перед собой не ставил, это в принципе не возможно.

Но чтобы показать вам, что все проблемы решаются покажу как "растянуть" еще и блок контента. Сразу оговорюсь, напрямую в блочной модели невозможно без javaScript расятнуть один блок до другого блока, сделать это можно только на 100% высоту. Без яваскрипта вопрос решается таблицей. Делаете 3 ячейки по вертикали (шапка, контент, подвал). Если ограничить высоту шапки и подвала, а высоту таблицы сделать 100%, то в итоге контентная часть будет просчитываться браузером автоматически.

Я же покажу как закрасить фон блока контента в белый цвет не трогая блок wrapper. Все очень просто, создаем еще один блок вложенный в блок wrapper, назовем его, например wrapper2. Укажем ему высоту 100% и белый фон. Что итребовалось доказать

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
 <style type="text/css">
 body, html{ padding:0; margin:0; height: 100%;}
body {
 background:#ddd;
 min-height: 100%;
 height: 100%;
 position: relative;
}
 #wrapper { width:200px; margin:auto; height:100%;}
 #wrapper2{ width:200px; margin:auto; height:100%; background:#fff;}
 #header{ background:#CC3366; width:100%; height:50px;}
 #content{ width:100%; background:#fff; padding-bottom:50px;}
 #footer{ width:200px; margin:-50px auto; background:#000; color:#fff; height:50px;}
 
 </style>
</head>
 
<body>
<div id="wrapper">
<div id="wrapper2">
 <div id="header">
 шапка
 </div>
 <div id="content">
 основной текст сайта
 </div>
 
</div>
</div>
<div id="footer">
 подвал
 </div>
</body>
</html>

До новых встреч. На закуску как всегда сочное видео на тему экстрим-сплава. Рафтинг на реке Замбези, порог с говорящим названием - "унитаз дьявола".



Похожие статьи:
↑ Наверх ↑
  • Комментарии
  • Den (24/12/2012 - 18:47):

    проблемка только при таком решении, при зуме (увеличение), футер наползает на контент

  • TakProstoTak.ru (24/12/2012 - 19:12):

    2 Den: Да, действительно есть такая проблема. Спасибо, что обратили внимание. Какие варианты решения видите?

  • Александр (29/03/2013 - 12:55):

    Добрый день, а можно подробней- как дотянуть фон основного блока до подвала? чет не могу понять…
    Спасибо заранее! надеюсь, что поможете!

  • TakProstoTak.ru (29/03/2013 - 13:22):

    @Александр, #3:

    Добрый день, а можно подробней- как дотянуть фон основного блока до подвала?

    Способ заключается в следующем – растягиваем #wrapper на высоту 100% у футера делаем отрицательный внешний отступ снизу, за счет этого футер налазиет на враппер, далее у врапера нужно сделать внутренний отступ снизу, чтобы контент не закрывало футером. Вот и все об этом и написано в статье. Подробнее… – это зависит от вашей конкретной задачи. Я для примера взял самый простой вариант и на его примере показал суть подхода, но есть еще ньюансы, исходя из которых вам и надо решать что и как делать.

  • Алексей (25/07/2013 - 14:51):

    А вы точно тестировали это? Ни один браузер не задаст высоту Body = 100%
    Хром, Мозилла, ИЕ – везде подменяется на auto. и получаем картинку как на первом скриншоте.

  • TakProstoTak.ru (25/07/2013 - 15:14):

    @Алексей, #5:
    Да, вы правы. нужно у BODY убрать стиль height: auto !important;

    Если я неошибаюсь, это правило использовалось раньше для ИЕ 6-7. сейчас уже не актуально.

  • Артурвеб (30/12/2013 - 16:40):

    Подскажите.. сделано все как у вас, но при короткой статье на футер “налезает длинное ” меню сайдбара..пока поставил распорку..есть решение? для сайдбара- позиция absolute сайт -__http://dekadnik.ru/reklama

  • TakProstoTak.ru (13/01/2014 - 16:23):

    @Артурвеб, #7:
    У вас похоже были проблемы в целом с версткой. Может меню абсолютно позиционировалось и поэтому налазило на футер. В целом правый блок должен отодвигать вниз футер.

  • Мила (29/01/2014 - 10:27):

    У вас в названии есть строчка “как растянуть блок div по высоте”, ну и где же ответ на вопрос? как растянуть div content до футера? #wrapper{ background:#fff;} не решит проблемы, а просто скроет ее! у меня фон обертки должен отличаться, как сделать, чтобы content растянулся по высоте до футера?

  • TakProstoTak.ru (29/01/2014 - 10:43):

    @Мила, #9:

    Врядли тут можно дать универсальный способ решения проблемы на все случаи жизни. В каждом конкретном случае вопрос решается по своему. В примере было проще покрасить wrapper в белый цвет. Если вам нужно именно растянуть контент до футера, то только таблицы, других вариантов я не вижу. Но я противник таблиц там где можно обойтись блоками. Опять же все зависит от вашего дизайна, как вариант растяните контент на 100% и сделайте внутренний отступ снизу на величину футера.

  • Дмитрий (12/03/2014 - 15:20):

    Действительно, вопрос решен поверхностно. Да, собственно, он, вообще не решен.

  • TakProstoTak.ru (12/03/2014 - 15:46):

    Ну ребята, вы меня засмущали. Буду менять статью.

  • Алексей (23/04/2014 - 18:22):

    Приветствую!
    Вариант такого решения растягивания фона контентной части довольно простой: wrapper раскрашивается фоном, а header и footer своими фонами это все прикрывают. В итоге content можно и не красить по фону. Но что делать в случае, если content должен быть окрашен и должен идти до footer, а между header и content должен быть промежуток без заливки, а заливка должна быть только у content ? Получается, что красить wrapper или wrapper2, которые у нас по всей высоте сайта идут – нельзя, т.к. их фоны будут проступать между header и content, а этого не нужно. Т.е. у header свой фон, у content свой фон, у footer свой фон и у body. Я уже неделю бьюсь с решением этой задачи и никак не могу добиться нужного результата.

    К тому же проблема еще вот какая: у html и у body выставлены фоны по оси x (у html – внизу, у body – вверху). Для body и html выставлена height:100%; С верхней полосой фона проблем нет никаких, но вот нижняя – она идет ровно по нижней границе окна браузера не смотря на то, что контент уходит далеко вниз и стоит прокрутить окно вниз – нижняя полоса фона так и остается висеть на месте там, где была нижняя граница экрана, образуя под собой пустоту фона. Внизу footer на своем месте сразу после контентной части, где я его вытащил margin-top: -50px; вверх на всю его высоту. Что может быть с фонами такого, что они не доходят до конца документа, а ограничиваются только нижней границей экрана?

    P.S.: Пробовал красить wrapper – он доходит естественно так же до нижнего края экрана и не идет дальше.

  • TakProstoTak.ru (23/04/2014 - 19:15):

    @Алексей, #14:

    Но что делать в случае, если content должен быть окрашен и должен идти до footer, а между header и content должен быть промежуток без заливки, а заливка должна быть только у content ?

    Вариантов вижу 2.
    1) В мою схему добавляем еще один блок в конец шапки или в начала контента и красим его нужным цветом.
    2) Используем html таблицу. Выоту таблицы делаем 100%. Верхняя ячейка – шапка, фиксируем ее высоту. Нижняя ячейка – футер также будет с фиксированной высотой. Высоту средней ячейки не трогаем, браузер сам просчитает. Между шапкой и контентом можно еще добавить ячейку с нужной высотой и необходимым фоном.

  • Алексей (23/04/2014 - 23:48):

    @TakProstoTak.ru, #15:
    По Варианту 1: Это сработает, если мы красим в цвет, а если есть фон, например в body прописанный с рисунком и нужно, чтобы он был виден, т.е. не закрашен в просвете между header и content ? Блок конечно туда вставляется и я так и делал, но content у меня не идет до низа, как и в вашем примере, т.к. в примере вы маскируете фоном wrapper идущим от начала и до конца, при том, что содержимое content на самом деле до низа может и не доставать. Т.е. тут как раз то стоит задача именно content растянуть, но он не растягивается. К тому же я хотел у content скруглить верхние углы, а в случае, когда над ним где то расположен закрашенный блок, а задним слоем за content идет фон от wrapper, то скругление углов тут бесполезно (в уголках будет виден кусок фона whapper и углы все равно останутся прямыми), да и тень на content не наложишь – она будет отбрасываться только тем кусочком, который данные содержит.

    По Варианту 2: таблицей конечно можно разместить все, но неужели с div тут совсем никак нельзя?
    Параллельный вопрос: у тега ячейки td в CSS можно задать скругление углов и тень? Т.е. будет ли это к нему применяться, как к div?

  • TakProstoTak.ru (24/04/2014 - 6:26):

    @Алексей, #16:
    В лоб эту задачу не решить. Поскольку высота шапки фиксированна, высоту контента нужно задавать не в %, а в абсолютных значениях, а это значит, что тянутся блок контента не будет. Можно яваскриптом просчитывать высоту контента при разных высотах окна браузера, но это очень корявое решение не рекомендую. Все очень сильно зависит от конкретной задачи. Какой фон? какие углы скруглять? что должно просвечивать? Но так как вы решаете задачу – она не разрешима, нельзя при помощи CSS растянуть блок на высоту 100%-(высота шапки), можно на 100%, на 75%, на 100px и только так.
    Таблицы должны помочь.

    @Алексей, #16:

    у тега ячейки td в CSS можно задать скругление углов и тень?

    Можно в я чейку вставить блок и уже у блока скруглять углы.

  • Алексей (24/04/2014 - 13:08):

    Спасибо!

  • boris (19/09/2014 - 21:22):

    Благодарю, информация очень пригодилась

Прокомментировать

Подписаться, не комментируя

Видеоуроки для вебмастеров

Идеальный хостинг