DIV верстка — Часть 4 — Как прижать футер (footer, подвал) к низу экрана в нашем макете сайта

12 Июнь, 2010

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

  1. Основы блочной верстки
  2. Создаем блоки для двухколоночного макета в HTML, определяем их размеры и задаем позиционирование в CSS
  3. Создаем двухколоночный, трехколоночный и резиновый макеты для сайта

Кроме этого в первых статьях, посвященных верстке сайта (тут описаны ее принципы на основе полученных знаний по Html и CSS), были рассмотрены некоторые базовые понятия вебмастеринга, без понимания которых было бы довольно трудно разобраться в нюансах.

Какие проблемы возникли с нашим макетом сайта


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

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

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

Т.е. правильное поведение футера для случая малого количества информации на странице и большого экрана пользователя будет следующим:

Что бы это реализовать, нужно осуществить ряд манипуляций с кодом нашего макета. Причем, изменения мы будем вносить не только в файл стилевого CSS оформления Style.css, но и в Index.html, содержащий Html код и формирующий Div блоки. Но обо всем по порядку.

Для примера мы будем использовать созданный нами ранее трехколоночный макет сайта. При этом Index.html будет выглядеть так:

<!DOCTYPE Html PUBLIC "-//W3C//DTD Html 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Заголовок</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="maket">
<div id="header">Шапка </div>
<div id="left">Левая колонка Меню Меню Меню Меню</div>
<div id="right">Правая колонка Меню Меню Меню Меню</div>
<div id="content">Содержимое страницы Содержимое страницы Содержимое страницы Содержимое страницы </div>
<div id="footer">Подвал</div>
</div>
 </body>
</html>

А в файле Style.css были прописаны следующие CSS свойства:

body, html {
margin:0px;
padding:0px;
}
#maket {
width:800px;
margin:0 auto;
}
#header{
background-color:#C0C000;
}
#left{
background-color:#00C0C0;
width:200px;
float:left;
}
#right{
width:200px;
background-color:#FFFF00;
float:right;
}
#content{
background-color:#8080FF;
margin-left:202px;
margin-right:202px;
}
#footer{
background-color:#FFC0FF;
clear:both;
}

Ну, а сам макет выглядел примерно так:

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

Как прижать футер к низу макета сайта


Итак, нам нужно сместить Div контейнер с футером к низу экрана. Для этого сначала потребуется задать высоту всей страницы, равную ста процентам (она будет занимать весь экран). Это нужно будет для того, чтобы затем изменить размер основного блока с макетом тоже до 100%.

Все содержимое страницы сайта помещается в открывающий и закрывающий теги Body и поэтому нам нужно в Style.css дописать для тега Body еще одно CSS свойство, задающее высоту равной 100%:

body, html {
margin:0px;
padding:0px;
height: 100%;
} 

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

Основные свойства CSS, при желании, вы можете посмотреть в Уроках CSS. Теперь зададим для Div контейнера, в котором заключен весь наш макет, минимальную высоту равную 100%:

#maket {
width:300px;
margin:0 auto;
min-height: 100%;
}

Еще я хочу его подсветить (div с id="maket"). Для этого задам ему рамку с помощью соответствующего свойства Border (тут читайте про рамки в CSS):

#maket {
width:300px;
margin:0 auto;
min-height: 100%;
border: solid 3px black;
}

Свойство border: solid 3px black позволяет задать для данного контейнера сплошную рамку (solid) толщиной в 3 пикселя черного цвета. Это позволит наглядно увидеть, что контейнер с макетом растянулся на всю высоту экрана даже при малом количестве информации на странице:

Теперь нам нужно будет вынести блок футера из общего контейнера и разместить его ниже, сразу же после общего. Что это даст? А то, что, наконец-то, соизволит опуститься вниз футер в макете, а не будет как прежде прижиматься к наиболее длинной его колонке. В этом случае Index.html примет следующий вид:

<!DOCTYPE Html PUBLIC "-//W3C//DTD Html 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Заголовок</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="maket">

<div id="header">Шапка </div>
<div id="left">Левая колонка Меню Меню Меню Меню</div>
<div id="right">Правая колонка Меню Меню Меню Меню</div>
<div id="content">Содержимое страницы Содержимое страницы Содержимое  </div>
</div>
<div id="footer">Подвал</div>
 </body>
</html>

Обратите внимание, блок с футером теперь не находится внутри общего контейнера (maket), а следовательно его ширина теперь уже не регулируется CSS свойствами, заданными для maket в файле со стилевым оформлением Style.css. Футер будет по ширине растягиваться на весь экран, но все-таки он уже будет расположен внизу экрана, сразу под основным блоком:

Но опять возникает проблема, ибо для того, чтобы увидеть подвал, теперь приходится прокручивать экран в браузере (видите на приведенном рисунке полосу прокрутки).

Получается это потому, что основной контейнер (maket) занимает по высоте весь размер экрана (это определяется свойством min-height: 100%), а футер располагается сразу за ним и для его просмотра уже придется использовать прокрутку, что не очень то удобно и функционально.

Решить эту проблему можно, задав отрицательный отступ для Div контейнера с футером для того, чтобы он сместился вверх, на расстояние равное его высоте. При этом контейнер footer наедет на основной и впишется в высоту экрана браузера (т.е. не нужно будет использовать прокрутку для его просмотра).

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

Поэтому сначала зададим контейнеру содержащему подвал высоту, прописав соответствующее свойство в Style.css:

#footer{
background-color:#FFC0FF;
clear:both;
height: 50px;
}

А затем задаем для него отрицательный отступ сверху на высоту равную его высоте:

#footer{
background-color:#FFC0FF;
clear:both;
height: 50px;
margin-top:-50px;
}

Это позволит подвалу подняться вверх ровно на свою собственную высоту и тем самым вписаться в экран браузера (теперь можно убрать CSS свойство border: solid 3px black из правила для maket, чтобы толщина рамки не мешала всему нашему макету вместе с футером поместиться в экране по высоте):

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

Вставляем распорку и боремся с Internet Explorer


Но возникает проблема, которая проявится только тогда, когда информации на странице макета станет больше и может получиться такая ситуация:

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

Т.е. получается, что внизу экрана расположены два блока, перекрывающие друг друга в области подвала.

Решение данной проблемы заключается в добавлении нового пустого Div контейнера (так называемой распорки) в основной контейнер нашего макета (maket), в то место, где раньше располагался блок с футером.

Задав для этого нового контейнера высоту, равную высоте подвала, мы сможем избежать наезда информации из основного контейнера на блок с футером. Присвоим этому контейнеру ID (тут читайте про CSS селекторы) с названием Rasporka и в результате Index.html нашего трехколоночного макета примет вид:

<!DOCTYPE Html PUBLIC "-//W3C//DTD Html 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Заголовок</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="maket">
<div id="header">Шапка </div>
<div id="left">Левая колонка Меню Меню Меню Меню</div>
<div id="right">Правая колонка Меню Меню Меню Меню</div>
<div id="content">Содержимое страницы Содержимое страницы Содержимое страницы страницы страницы страницы страницы страницы</div>
<div id="rasporka"></div>
</div>
<div id="footer">Подвал</div>
 </body>
</html>

А в Style.css пропишем для этого (ID свойство Height, задающее высоту этому контейнеру-распорке равную высоте подвала:

#rasporka {
height: 50px;
}

В результате футер будет прижиматься снизу не к информации, содержащейся в основном контейнере (например, текст в самой высокой колонке), а на равную подвалу по высоте область с контейнером-распоркой, не содержащим никакой информации.

Таким образом мы избегаем наездов и перекосов в нашем трехколоночном макете. Все будет четко и красиво (чинно и благородно):

Как я уже упоминал выше, ширина футера теперь у нас должна задаваться отдельно, т.к. этот контейнер теперь не входит в состав основного. Для этого нужно добавить в CSS файл дополнительные свойства для Footer, позволяющие задать его ширину и выровнять его посередине экрана по горизонтали.

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

Таким образом, нам нужно будет добавить для ID Footer дополнительные свойства:

#footer{
background-color:#FFC0FF;
clear:both;
height: 20px;
margin-top:-20px;
width:800px;
margin-left: auto;
margin-right: auto;
}

С помощью свойства width:800px задается ширина равная 800 пикселей, а с помощью двух свойств margin-left: auto и margin-right: auto задается настройка отступа слева и справа от подвала автоматически, в результате чего эти отступы будут равными и наш герой выровняется по середине:

Ну вот, вроде больше уже нечего улучшать, но не тут-то было. Как всегда наш любимый браузер Internet Explorer 6 чего-то да не понимает из используемых нами свойств CSS. В этом браузере (и, возможно, в каких-то других старых тоже) не смотря на все наши старания подвал не будет прижат к низу, а по прежнему будет прилипать к самой высокой колонке макета сайта.

Все это происходит из-за того, что (браузер Internet Explorer 6 не понимает свойство min-height: 100%, которое мы использовали для задания минимальной высоты основного блока, равной высоте экрана.

Поэтому для решения этой проблемы нам придется применить так называемый хак, позволяющий объяснить (на пальцах) старым браузерам, что нужно делать. Перед списком CSS свойств для maket нужно будет вставить следующую комбинацию:

* html #maket {
height: 100%;
}

Это правило будет применено только для браузера Internet Explorer 6, остальные не будут его учитывать и выполнять.

Итак, окончательный вид Style.css с прижатым к низу экрана футером будет следующим:

body, html {
margin:0px;
padding:0px;
height: 100%;
}
* html #maket {
height: 100%;
}
#maket {
width:800px;
margin:0 auto;
min-height: 100%;
}
#header{
background-color:#C0C000;
}
#left{
background-color:#00C0C0;
width:200px;
float:left;
}
#right{
width:200px;
background-color:#FFFF00;
float:right;
}
#content{
background-color:#8080FF;
margin-left:202px;
margin-right:202px;
}
#footer{
background-color:#FFC0FF;
clear:both;
height: 50px;
margin-top:-50px;
width:800px;
margin-left: auto;
margin-right: auto;
}
#rasporka {
height: 50px;
}

Ну, а окончательный вид Index.html был приведен чуть выше. Все, на этом серию статей, посвященную блочной верстке 2 и 3 колоночных фиксированных и резиновых макетов сайта, можно считать завершенной.

Можете также посмотреть видео «Работа с Html тегом div»:

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Еще:

Рубрики :Блочная DIV верстка

Комментарии и отзывы

bescom

Извините, случайно не у Игоря Квентора заимствован материал? Уж очень похоже, да и не в первый раз...

Дмитрий

bescom: нет, я не знаю его. Материал похож, наверное, по одной простой причине — это решение как прижать футер к низу макета наиболее популярное и простое и многие его описывают, в том числе и я. Да, один из скриншотов не мой, я взял его с какого-то сайта, для иллюстрации правильного расположения футера, может быть именно с сайта этого уважаемого господина. Ну, я думаю, он не сильно обидится на меня за это, просто не было под рукой подходящего примера.

bescom

Ну да, я и не говорю, что Вы копипастите. Просто у него был цикл очень грамотных статей и даже книги про блочную верстку. А следом через год-два у Вас выходят материалы с заголовками «один-в-один», с не менее грамотным изложением. Подумалось — не оттуда ли черпаете вдохновение. 🙂

Hiway

bescom: +1

Дмитрий

bescom, Hiway: может ссылку кините, а то не совсем понятно, о чем идет речь.

Ольга

Очень интересная статья о том, как можно прижать футер к низу. Спасибо.

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

Александр

Да, я вот сейчас все по вашим урокам сделал, всё красиво и понятно, за что спасибо огромное! И хочу попробовать заполнить блоки контентом типа текстов и картинок, поэтому есть опасения как бы все не перекосило. Вам бы продолжить серию статей и на данном примере описать как происходит процесс наполнения сайта и что происходит с макетом на блочной верстке при этом 🙂

Славик

В FF конструкция

margin-top:-50px;

не работает

Виктор

Вопрос. Как сделать, чтобы «Содержимое страницы» (то что у нас посередине), при малой информации внутри неё, всё-равно всегда растягивалось до футера своим фиолетовым цветом, а не выглядела при разном наполнении страниц разными обрубками?

Graff

Виктор говорит, что:

Вопрос. Как сделать, чтобы “Содержимое страницы” (то что у нас посередине), при малой информации внутри неё, всё-равно всегда растягивалось до футера своим фиолетовым цветом, а не выглядела при разном наполнении страниц разными обрубками?

Меня тоже это интересует!

puffik

Graff говорит, что:

Виктор говорит, что:

Вопрос. Как сделать, чтобы “Содержимое страницы” (то что у нас посередине), при малой информации внутри неё, всё-равно всегда растягивалось до футера своим фиолетовым цветом, а не выглядела при разном наполнении страниц разными обрубками?

Меня тоже это интересует!

Присоединяюсь к выше сказанному,хотелось бы узнать продолжение темы!

Даниил

Graff говорит, что:

Виктор говорит, что:

Вопрос. Как сделать, чтобы “Содержимое страницы” (то что у нас посередине), при малой информации внутри неё, всё-равно всегда растягивалось до футера своим фиолетовым цветом, а не выглядела при разном наполнении страниц разными обрубками?

Меня тоже это интересует!

И я уже перелопатил пол интернета в поисках ответа не этот вопрос!

КОля

Дмитрий: у него украдено у него. со скринами на пару )) не хорошо красть!

КОля

Даниил: есть 1 метод но он очень дикий и есть в интернете но его просто так не найдеш

КОля

и кстати данная верстка плохая так как текст налазит 1 на другой при увеличении екрана

Дмитрий

КОля: не говорите ерунды. Где ваши доказательства... А то собака лает, ветер носит... Не хорошо наговаривать, тем более что вы заблуждаетесь. Я все никак не могу добиться от кого-нибудь ссылки на материалы «маэстро», у которого я якобы «спер» всем известные постулаты блочные верстки. Уже и вправду стало интересно.

bescom

Дмитрий: Собственно, особо искать не нужно, по первому же запросу ссылка так и впрыгивает на экран — http://www.websovet.com/kak-prizhat-podval-k-nizu-ekrana#more-211

Скрин оттуда. Правда, Квентор делает оговорку, что он тоже не автор способа, а его реализатор.

Остальные темы по блочной верстке — тоже очень пересекаются. Так что желательно не раздувать пожар, а сказать — да, немного черпал вдохновение и оттуда. Чего уж там...

Дмитрий

bescom: да, т.е. нет. «Да», в смысле, сначала разобрался с деталями блочной верстки сам, используя ряд материалов (курс Андрея Морковина в том числе), а потом написал, так как понял и как было бы понятно другим. «Нет», в смысле, не помню приведенной выше статьи, но мог и забыть. Еще по поводу «да» — один скриншот был взят из Яндекс.Картинок. По поводу «нет» — все остальные скрины мои.

Ребят, мне честно говоря, по барабану — считать такое изложение плагиатом или нет. Меня передернуло заявление о краже материала. Такого не было, да и вряд ли, может быть в будущем, ибо это довольно не рентабельно, в плане получения не уникального текста и изображений — оно мне на фиг не надо.

bescom

Дмитрий: Заметьте — я не говорил о плагиате, только лишь о черпании вдохновения. Лично мне очень нравится, как Вы излагаете материал — подетально, четко и понятно. Да и вообще, все мы при подготовке собственного материала в той или другой степени используем чужой материал.

Роман

Автор забыл добавить очистку обтекания перед распоркой

#clear

{

clear: both;

}

Константин

Автор замечательно дает материал — все запоминается само собой. Но! Частенько попадаются устаревшие данные и ошибки, которые очень тяжело находить и исправлять самостоятельно. Желательно устранить несоответствие стандартов в примерах

Alien

Млин, статья не для людей, а для поисковых роботов. Читать невозможно!

Дмитрий

bescom: конечно, полностью с вами согласен.

Роман: спасибо за дополнение.

Константин: увы, бывают и недоработки.

Alien: эта песенка стара... Почитайте мои отповеди к подомным комментариям в других статьях. Повторяться нет желания.

Виталий

Даниил говорит, что:

Graff говорит, что:

Виктор говорит, что:

Вопрос. Как сделать, чтобы “Содержимое страницы” (то что у нас посередине), при малой информации внутри неё, всё-равно всегда растягивалось до футера своим фиолетовым цветом, а не выглядела при разном наполнении страниц разными обрубками?

Меня тоже это интересует!

И я уже перелопатил пол интернета в поисках ответа не этот вопрос!

И я тоже перелопатил! весь день потратил...

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

придумал гениальный, фактически революционный метод: сверстать каркас таблицами. Товарищи там где целесообразней сверстать таблицами, ими и надо верстать, а не ломать голову над блочной вёрсткой. И к чёрту все холивар на эту тему.

всё сказал.

bescom

Виталий: Вот, дожили и доверстались..., что табличная верстка становится новаторством и революционным методом. 🙂 А вообще — правильно. Там, где целесообразнее делать таблицами — ими и надо делать! Тем более, что у них есть вполне определенные преимущества перед блочной версткой.

Сергей

Статья хорошая.Мне пригодилась.

Думаю, что в скором времени появится куча вопросов.

Тогда доложу.

Сергей

Виноват!

Забыл автору сказать: «Спасибо!» .

Владимир

Может я чего-то не понимаю, но зачем #maket задавать min-height: 100%, если можно просто поставить height:100%;, при этом даже с IE6 не надо заморачиваться?

Div84

Подскажите что нужно сделать если контента мало а левое меню растягивается(акардион).При раскрытии всего меню наезжает под footer.Кто знает напишите решение!

Александр

Здрасте всем. Решил ваш вопрос прижатия с помощью несложного javascript кода. Что самое банальное — в конце, когда код был готов — он использует только 1 CSS строку.

http://alexnetstudio.org.ua/view_post.php?id=64

Михаил

У меня вопрос относительно кодировки PHP файла. Просто я сразу создал файл формата PHP для Joomla, ну Index который. Вот, скопировал полностью ваш код. Заменил путь к css. Всё отобразилось. Но, если я «сохраняю как» файл в формате utf-8, с заменой самого себя, то при попытке открыть его браузером я вижу в окне код. Тут же сразу создал блокнот в формате utf-8. Всё отображается нормально. Попробовал пересохранить в 1251 (ANSI — кириллица) — всё в квадратиках. Соррир за много букв. Просто интересно, что происходит. Браузер Google Chrome.

Роман

Слишком черезчур текст под поисковики оптимизирован, читать не возможно...

freem

Код выровненный по центру убивает

Александр

Спасибо за основательные и подробные разъяснения.

Очень помогли уроки. Все с толком, с расстановкой, на конкретном примере.

Александр

Знающих верстальщиков в интернете, на сколько я понял, много. Однако тех, кто осмелится на этот кропотливый труд — единицы. А тех, кто может грамотно донести информацию до начинающего — поискать надо. На уроках автора не приходится догадываться, а следишь за мыслью при переделках и доводках макета. Спасибо за урок, жду следующих.

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

Вика

у меня проблема-при уменьшении экрана содержимое средний колонки налазит на правую.и не меняються размеры левой и правой.ет конечно так и должно быть наверно но выглядит ужасно.как исправить?(может я чтото пропустила...)

Veon

Большое, спасибо. То что нужно

Lali

Если серьезно, материалов с грамотным, поэтапным изложением очень мало в нэте, тем более, если ты только начинаешь изучение сайтостроения, поэтому отдельное спасибо автору! Пригодилось! Критиков на мыло)

Edd2000

С удовольствием прочитал материал!

доступно, понятно, логически продумано.

такого доходчивого подхода давно не видел, все обрывки какие-то.

Спасибо!

Yalchic

Материал понравился! Всё наглядно и последовательно. Занимаюсь созданием сайтов в Joomla & WordPress, все шаблоны меняю как мне нужно, только своим сайтом не могу заняться (сапожник без сапог или бесплатно не хочется).

4ak

А не проще просто в контенте поставить падинг равный размеру футера и текст на него не наедет?

Nicolas

Даниил говорит, что:

Graff говорит, что:

Виктор говорит, что:

Вопрос. Как сделать, чтобы “Содержимое страницы” (то что у нас посередине), при малой информации внутри неё, всё-равно всегда растягивалось до футера своим фиолетовым цветом, а не выглядела при разном наполнении страниц разными обрубками?

Меня тоже это интересует!

И я уже перелопатил пол интернета в поисках ответа не этот вопрос!

И я тоже прелопатил! весь день потратил...

Так кто-нибудь объяснит этот фокус??

xBool

Ну наконец-то простой рабочий вариант. Спасибо!

Женька

Ё — моё!!!

привет всем) Возможно, я покажусь предсказуемым), но

Правда хотелось бы узнать, как блоки left, right content «дотянуть» до footer?

Денис

Для смещения дивы content до подвала, я задал высоту равную высоте див left right, вот и все)))

Николай

Автор нах всех, пиши дальше, хорошо написано

Антон

А как сделать чтобы левая колонка опускалась до подвала, а то она растягивается под текст в ней (в колонке содержание большой объем текста а в левой 4 строчки и фон левой колонки не соприкасается с подвалом)

Pasmado

задай контейнеру блока, где лежит колонка, значение min-height:100%. +

задаешь html body = height:100%

и будет счастье. (только не для IE 6)

там надо кое что добавить)))

DJW

это я вот один непонимаю,

сначала мы даём макету 100% экрана и поднимаем подвал на размер самого подвала, а потом делаем распорку на размер опять же самого подвала чтоб текст незакрывал, но народ, в итоге подвал из-за распорки и уходит туда где он и был после увеличения макета на 100%.

Я просто подобрал 91% макету и всё, не поднимал подвал не смещал его обратно распоркой, гемором вы тут занимаетесь и всё

Pasmado

Гемморой...ну ну))

91% от чего взято? если окна просмотра, то что с overflow?

когда текст доходит до упора,и если уменьшить страницу и прокрутить вниз, нечего на футер не налазит?

Victor

Спасибо за статью мне пригодилось.

Marlik

За статьи спасибо, есть правда несостыковка, с вашей распоркой, когда объем данных превышает 100%(двух-колоночный шаблон) и появляется прокрутка, то обе колонки(или та в которой объем данных превышает 100%) тупо упираются в футер. Выглядит не красиво, так как хотелось округлить(радиус)нижние уголки у колонок. Еще не пробовал, но мне думается в распорку надо воткнуть какую-нибудь вертикальную полоску прозрачную или под фон с размером по вертикали равной вашей распорки, прямо сегодня и попробую. Спасибо, продолжайте.

Илья

Спасибо большое! Прочитал до середины и всё получилось) Но всё равно всё до конца прочитал.

korn37

Каким образом лучше всего сделать отступ между подвалом и всем, что выше.

Спасибо.

Альфред

Отвечаю на этот вопрос(надеюсь еще актуально). «Как сделать, чтобы “Содержимое страницы” (то что у нас посередине), при малой информации внутри неё, всё-равно всегда растягивалось до футера своим фиолетовым цветом, а не выглядела при разном наполнении страниц разными обрубками?»

Используйте атрибут min-height через css к div-блоку. Если текста будет больше чем указанная там высота он будет растягиваться, а если меньше то он не будет уменьшатся.

Например:

#content {
     min-height: 600px;
}

Альфред

И еще автору: сделайте указание даты в комментариях и статьях на своем сайте. А то непонятно актуально или нет.

Никита

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

Артём

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

Artem

Артём

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

Выше написано как это сделать.

Альфред

Отвечаю на этот вопрос(надеюсь еще актуально). «Как сделать, чтобы “Содержимое страницы” (то что у нас посередине), при малой информации внутри неё, всё-равно всегда растягивалось до футера своим фиолетовым цветом, а не выглядела при разном наполнении страниц разными обрубками?»

Используйте атрибут min-height через css к div-блоку. Если текста будет больше чем указанная там высота он будет растягиваться, а если меньше то он не будет уменьшатся.

Например:

#content {

min-height: 600px;

}

Влад

В селекторах margin и padding когда значение 0 — px писать не нужно. 0px; не пишется, пишется просто 0;

Андрей

Спасибо! Уже устал с этим футером возиться, помогла статья ваша

Сергей

Помогите, пожалуйста! У меня в футере WordPress иконки счётчиков налазят на строчку копирайта. Что нужно сделать, чтобы увеличить между ними интервал? Если можно как можно проще! Желательно пользуясь функционалом Wordpess. Я языков программирования не изучал, сайт только начал делать.

Заранее благодарю.

Дмитрий

Сергей: ну, интервалы изменяются добавление марджин и паддинг.

ЭшиН

Админ, спасибо большое за инфу очень помогла все понятно показано как и что делать я наконецто решил эту проблему с помошью этой инфы!))

Татьяна

Огромное спасибо за столь подробное изложение материала!!! Сколько не читала для меня все как на китайском написано 🙂 А здесь все просто и доступно!!! Супер!!! Еще раз спасибо!!!

Денис

Не смог не удержатся и не сказать спасибо!!! за вот margin:0px;

padding:0px; к html и body

Alex

Автору большой респект. Не обращай внимания на гундосов :).

Небольшая ремарка.

Уже не используют #id для описания стилей блока.

.class-name — имена класов используются сейчас.

Если кому интересно то сюда

https://htmlforum.ru/topic/47375-tipichnyie-oshibki-nachinayushhego-verstalshhika/

Елена

Автор, напиши, пожалуйста, о привязке этого всего к Joomla)

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