Довольно часто мы сталкиваемся с ситуацией, когда на странице мало контента и футер едет вверх. Это чаще всего смотриться некрасиво, да и дизайнера не хочется расстраивать, ведь он же так старался, а мы взяли и все “запороли”.
Расскажу Вам о том, как можно очень просто прижать футер к низу страницы.
Заключаем весь контент, кроме футера в блок с id=”content”, прописываем для него относительное позиционирование и растягиваем по вытоте на весь экран. Ниже, относительно него располагаем блок футера. Важно знать высоту футера, чтобы поднять его вверх на это расстояние.
Вот и все :). Осталось только прописать хак для любимого «ослика» и поставить блок-распорку внизу блока content, чтобы контент в основном блоке не заезжал под футер.
Смотреть пример
Круто. Спасиб за статью.
На здоровье :)
Хм, интересно… но обязательны ли хаки?
Я, например, придерживаюсь вот этого рецепта: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page - и пока что он всюду работал.
Поторопился. По ссылке в предыдущем комментарии всё то же самое, что и у вас, но на английском, а вместо хака используется условный комментарий.
P.S. Без JS по умолчанию вместо имени посылается “Ваше имя / Название компании”. Что будет с JS я проверять не стал.
Не совсем тоже самое, что у меня.
В Вашем примере футер прижимается к низу при помощи position:absolute. В моем же примере его “толкает” к низу блок с контентом для которого стоит высота равная 100%.
Что касается хака. У меня он такой:
*html #content {height: 100%;}
У Вас он такой (условный комментарий это тот же хак):
<!–[if lt IE 7]>
<style media=”screen” type=”text/css”>
/* <!– */
#container {height:100%;}
/* –> */
</style>
<![endif]–>
Имхо, первый компактнее :)
На самом деле, у меня условный комментарий (хак, являющийся фичей, а не багом) выглядит вот так:
Но это уже дело вкуса…
За статью всё равно спасибо. А я, наверное, попробую совместить оба варианта так, чтобы подвал позиционировался абсолютно, но контент под него не заезжал благодаря распорке - так нижнее поле контента больше не будет зависеть от размеров футера.
<!– [if lte IE 7] >
< link rel=”stylesheet” href=”/css/ie56fix.css” type=”text/css” />
<! [endif] –>
Высоту футера всеравно придется учитывать, т.к. распорку в блоке с контентом мы должны ставить равную по высоте футеру. Но в 90% случаев дизайн сайта предусматривает фискированный футер, и проблем с этим нету.
Что-то в Opera 9.52 не прижимается :-(
Opera 9.52 еще в beta версии, поэтому протестировал в 9.51
Когда страница загружается, футер не прижимается к низу страницы. Но после того, как я сделал resize страницы, он прижался к низу. Странно себя ведет Opera. Вместе с новой версией появляются и новые глюки :), которых в принципе быть не должно.
Webmolot, получается, что те, кто сидят на опере при работе с сайтом постоянно должны одергивать размер экрана, чтобы футер прижимался книзу, каждый раз когда переходят на другую страницу сайта или просто обновляют страницу??
Опера немалопопулярный браузер.. хотелось бы и там без загагулин. Решения не существует? ;)
Ромео, конечно же я не могу позабыть о пользователях Opera. Если уже о пользователях глюканутого IE6 приходится думать, то все оперА меня просто не поймут :)
Решение найдено!
Опытным путем установлено, когда выносишь стили из html в файл css, футер и в опере версий 9.51 и старше прижимается к низу страницы. Мало того, можно просто прописать тег link в документе html, не ссылаясь ни на что и глюк так же исчезает.
Смотрим пример
* html #content {height:100%;}
скажите зачем это правило??
я имею ввиду, что это хак для ИЕ6, но разве фф непоймет ее?
Вы это пробоваали в фф 3?
У меня очень странный глюк - появляеться прокрутка вправо.
Не могу понять что с ней делать.
Это не глюк - это кривые руки. ссори. но вопрос про селектор остался.
Все, что идет после * html понимает только IE6, это так называемый хак. Такие хаки рекомендуется использовать только в крайнем случае, если другого выхода нельзя найти. Они усложняют css код и делают его невалидным.
Кстати, в нашем примере мы можем обойтись и без него. После свойства css min-height пишем height для IE6, но между ними вставляем так же хак, но более компактный и валидный height:auto !important.
Смотрим пример.
Я просто получаю удовольстиве от ваших советов!
Продолжайте в том же духе и выпустите книгу!
Спасибо!)
моя аська 230489155. хотелось бы вас добавить.
Приятно быть кому то полезным :)
Стучите в аську 446-086-927
постучитесь ко мне.
кстати я сделал как по той ссылке что дал михаил.
я удивлен, потомучто все работает без хаков с высотой для ослика.
Вот код.
*{padding:0;margin:0;border-collapse:collapse;font:1em Arial,serif;}
html,body{width:100%;height:100%;}
#content
{min-height:100%;position:relative;background:#ccc;}
#incontent
{margin:0 auto;padding:5px 0 229px 0;width:1000px;}
#bottomrainbow
{background:#ccc;height:229px;position:absolute;
bottom:0;width:100%}
….
….
…
косяк с ИЕ не обойти без хаков. Все ясно теперь.
Webmolot, спасибо большое за советы! ;)
Действительно, доходчиво и понятно! И вроде бы уже всё идеально.. да вот есть ещё такая мысля… не знаю, считать ли багом, но..
Если пользователь откроет сайт, находясь не в полноэкранном режиме браузера, а потом просто растянет окно по вертикали вниз, то футер не последует вниз, а будет оставлять зазор. После изменения размера экрана по горизонтали или перехода в полноэкранный режим - всё станет на свои места.
Не скажу, что значительно.. но… Кто что думает на этот счет? ;)
Да, есть такой грешек в опере. Причем если тянуть за уголок или тянуть по горизонтали, то все ОК. Я бы не считал это багом, но если кто-нибудь предложит лекарство я буду рад.
Вам нужна Html/Css верстка сайта? Webmolot поможет Вам сделать кроссбраузерную, валидную, сематнически правильную верстку Вашего сайта в кратчайшие сроки.