Как прижать футер к низу
Не так давно меня попросили показать, как прижать футер к низу. Подобная проблема встаёт только у блочной вёрстки. И, к сожалению, оптимального варианта нет, но в данной статье я покажу, как прижимаю футер к низу я при вёрстке сайтов.
Допустим, есть такой HTML-код:
<body>
<div id="main">
<p>Текст</p>
</div>
<div id="footer">
<p>Подвал</p>
</div>
</body>
Чтобы прижать футер к низу, надо применить к данному HTML-коду следующий CSS-код:
html {
height: 100%;
}
body {
height: auto !important; //Обязательно, если контента в main будет много
height: 100%;
min-height: 100%;
}
#main {
padding-bottom: 50px;
}
#footer {
bottom: 0;
height: 50px;
position: absolute;
}
Здесь всё прозрачно, но скажу только, что строчка "height: auto !important;" позволяет учитывать то, что если контента в main будет больше, чем высота страницы, то высота будет больше, чем 100%. Без неё подвал просто налезет на контент и всегда будет находиться в одном и том же месте.
К сожалению, решение не блещет красотой, но другие, на мой взгляд, ещё хуже. А вообще когда контента мало, то я просто внизу оставляю цвет фона сайта. Но заказчик иногда просит всё-таки прижать подвал к низу, и тогда я использую способ, описанный в данной статье.
-
Создано 10.09.2012 13:54:59
-
Михаил Русаков
Комментарии (23):
Михаил, почему Вы не показываете проекты (сайты), которые Вы разработали, я думаю было бы интересно посмотреть.
Ответить
Михаил, а почему мне так поздно приходит уведомление о новой статье на почту? Статья создана 13:54:59 А мне пришло 20:14:34
Ответить
Потому что подписчиков много и чтобы не перегружать сервак сделан таймер. Т.е. допустим 20 рассылок в 5 минут. Поэтому до вас и доходит так долго. Согласен с Алексеем. Выложите ссылки на ваши работы. Будет интересно
Ответить
Спасибо за ответ!!!
Ответить
Лучше ставить не position: absolute; а position: relative;
Ответить
Нет, так не получится. Попробуйте так сделать и посмотрите на результат.
Ответить
пробовал в самых старых браузерах, и в них значение absolute в свойстве position не поддерживается вообще и получается что футер съезжает на самый верх, а в новых он просто стоит на одном месте как зафиксированный... я даже не знаю как угодить и старым браузерам и новым
Ответить
Можно использовать отдельные файлы стилей.
Ответить
Если применить вашу статью про блочную вёрстку и эту то ничего не работает, а что заработало нужно в боди поставить position: relative
Ответить
А мне кажется, что лучшим решением будет просто поставить fixed и все
Ответить
Михаил а как сделать полосу как у вас?
Ответить
Какую полосу?
Ответить
Которая на нижней части у меня не получается #footer { position:relative; text-align:center; background:#990000; color:#FFFFFF; bottom:0px; width:100%; margin-top:0; height:23px; } как сделать чтоб была на всю ширину страницы?
Ответить
Нужно, чтобы родительский контейнер это позволял. Если футер находится внутри блока шириной 10 пикселей, то поставив у футера 100%, он и будет 10 пикселей.
Ответить
подскажите пожалуйста можно ли чтобы футер находился в отдельном блоке и как??
Ответить
Можно его хоть внутрь <body> напрямую засунуть.
Ответить
Извените за столько вопросов но у меня не получается можете подродно обьяснит?
Ответить
http://myrusakov.ru/html-block-makeup.html
Ответить
Я попробовал Ваш пример в браузере запустить. Но проблема: если окно по высоте сжимать, то футер в конце концов наезжает на основной контейнер. А как реализовать следующее: если высота экрана больше min-height - футер прижат к низу видимой области окна, если высота меньше min-height - футер на эту величину смещенным вниз и остается?
Ответить
все, разобрался, надо задать основному контейнеру высоту
Ответить
Здравствуйте, Михаил! Попробовал применить ваш пример - есть проблема. Сделал абсолютное позиционирование футера вниз, а вот когда высота блока main больше экрана - футер будет находится над содержимым. Чтобы пример работал, на в боди поставить position: relative как посоветовал Владислав Малиничев
Ответить
а я так делаю: #footer { clear: both; } он у меня в самом низу "контейнера" находится
Ответить
У меня проблема: При уменьшении экрана до 25% футер поднимается и прижимается к контенту. и position:relative; при absolute у меня футер налазиет на контент,хотя сделал все, как вы указали
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.