<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

Данный курс научит Вас создавать крупные проекты на Java грамотно и быстро. В курсе Вы увидите создание большой и сложной программы на Java абсолютно с нуля.

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

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

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

Подписавшись по 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 guseinlisabuhi@mail.ru 28.01.2013 02:28:25

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

Ответить

Admin Admin 28.01.2013 10:38:29

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

Ответить

guseinlisabuhi@mail.ru guseinlisabuhi@mail.ru 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 guseinlisabuhi@mail.ru 28.01.2013 21:01:44

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

Ответить

Admin Admin 28.01.2013 21:13:44

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

Ответить

guseinlisabuhi@mail.ru guseinlisabuhi@mail.ru 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 у меня футер налазиет на контент,хотя сделал все, как вы указали

Ответить

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