<MyRusakov.ru />

WordPress 6 с Нуля до Гуру

WordPress 6 с Нуля до Гуру

Этот курс научит Вас созданию самых разных сайтов на самой популярной в мире CMS - WordPress. Вы увидите установку и настройку локального сервера, разбор каждой настройки, каждой кнопки и каждого пункта меню в панели WordPress.

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

Помимо уроков к курсу идут упражнения для закрепления материала.

И, наконец, к курсу идёт ценнейший Бонус по тому, как используя ChatGPT и создавая контент для сайта, можно выйти на пассивный доход. Вы наглядно увидите, как зарегистрироваться в ChatGPT (в том числе, и если Вы из России), как правильно выбрать тему для сайта, как правильно генерировать статьи для него(чтобы они индексировались поисковыми системами) и как правильно монетизировать трафик на сайте.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

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

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

Не так давно меня попросили показать, как прижать футер к низу. Подобная проблема встаёт только у блочной вёрстки. И, к сожалению, оптимального варианта нет, но в данной статье я покажу, как прижимаю футер к низу я при вёрстке сайтов.

Допустим, есть такой 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%. Без неё подвал просто налезет на контент и всегда будет находиться в одном и том же месте.

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (23):

lion337 lion337 10.09.2012 16:20:00

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

Ответить

malina95 malina95 10.09.2012 21:13:18

Михаил, а почему мне так поздно приходит уведомление о новой статье на почту? Статья создана 13:54:59 А мне пришло 20:14:34

Ответить

lev_100rus lev_100rus 11.09.2012 00:31:50

Потому что подписчиков много и чтобы не перегружать сервак сделан таймер. Т.е. допустим 20 рассылок в 5 минут. Поэтому до вас и доходит так долго. Согласен с Алексеем. Выложите ссылки на ваши работы. Будет интересно

Ответить

malina95 malina95 11.09.2012 17:47:48

Спасибо за ответ!!!

Ответить

malina95 malina95 06.11.2012 01:29:24

Лучше ставить не position: absolute; а position: relative;

Ответить

Admin Admin 06.11.2012 09:52:18

Нет, так не получится. Попробуйте так сделать и посмотрите на результат.

Ответить

malina95 malina95 06.11.2012 15:48:56

пробовал в самых старых браузерах, и в них значение absolute в свойстве position не поддерживается вообще и получается что футер съезжает на самый верх, а в новых он просто стоит на одном месте как зафиксированный... я даже не знаю как угодить и старым браузерам и новым

Ответить

Admin Admin 06.11.2012 18:53:21

Можно использовать отдельные файлы стилей.

Ответить

malina95 malina95 12.01.2013 20:29:47

Если применить вашу статью про блочную вёрстку и эту то ничего не работает, а что заработало нужно в боди поставить position: relative

Ответить

HENRI HENRI 07.05.2013 18:14:44

А мне кажется, что лучшим решением будет просто поставить fixed и все

Ответить

guseinlisabuhi@mail.ru [email protected] 28.01.2013 02:28:25

Михаил а как сделать полосу как у вас?

Ответить

Admin Admin 28.01.2013 10:38:29

Какую полосу?

Ответить

guseinlisabuhi@mail.ru [email protected] 28.01.2013 18:40:40

Которая на нижней части у меня не получается #footer { position:relative; text-align:center; background:#990000; color:#FFFFFF; bottom:0px; width:100%; margin-top:0; height:23px; } как сделать чтоб была на всю ширину страницы?

Ответить

Admin Admin 28.01.2013 20:43:54

Нужно, чтобы родительский контейнер это позволял. Если футер находится внутри блока шириной 10 пикселей, то поставив у футера 100%, он и будет 10 пикселей.

Ответить

guseinlisabuhi@mail.ru [email protected] 28.01.2013 21:01:44

подскажите пожалуйста можно ли чтобы футер находился в отдельном блоке и как??

Ответить

Admin Admin 28.01.2013 21:13:44

Можно его хоть внутрь <body> напрямую засунуть.

Ответить

guseinlisabuhi@mail.ru [email protected] 28.01.2013 23:43:28

Извените за столько вопросов но у меня не получается можете подродно обьяснит?

Ответить

Admin Admin 29.01.2013 09:43:52

http://myrusakov.ru/html-block-makeup.html

Ответить

kraktus kraktus 04.02.2013 02:25:12

Я попробовал Ваш пример в браузере запустить. Но проблема: если окно по высоте сжимать, то футер в конце концов наезжает на основной контейнер. А как реализовать следующее: если высота экрана больше min-height - футер прижат к низу видимой области окна, если высота меньше min-height - футер на эту величину смещенным вниз и остается?

Ответить

kraktus kraktus 04.02.2013 03:35:59

все, разобрался, надо задать основному контейнеру высоту

Ответить

Дмитрий184 Дмитрий184 28.03.2013 18:09:20

Здравствуйте, Михаил! Попробовал применить ваш пример - есть проблема. Сделал абсолютное позиционирование футера вниз, а вот когда высота блока main больше экрана - футер будет находится над содержимым. Чтобы пример работал, на в боди поставить position: relative как посоветовал Владислав Малиничев

Ответить

sergkosm sergkosm 12.04.2013 23:51:38

а я так делаю: #footer { clear: both; } он у меня в самом низу "контейнера" находится

Ответить

Martish Martish 21.04.2014 00:04:31

У меня проблема: При уменьшении экрана до 25% футер поднимается и прижимается к контенту. и position:relative; при absolute у меня футер налазиет на контент,хотя сделал все, как вы указали

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.