Автор Тема: Привязать футер к низу  (Прочитано 452 раз)

16 Августа 2013, 00:23:22
  • Старожил
  • ****
  • Сообщений: 293
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Привет. После основного блока идет блок Футер. Скажите, можно как-то привязать его к низу экрана, чтоб при уменьшении окна он не терялся где-то внизу?
16 Августа 2013, 00:46:56
Ответ #1
  • Фрилансер
  • *
  • Сообщений: 140
  • Репутация: +0/-0
    • Просмотр профиля
Также как в обычной верстке
html, body {
  height: 100%;
}
div#page {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin-bottom: -XXpx  <- высота футера;
}
16 Августа 2013, 11:14:20
Ответ #2
  • Фрилансер
  • *
  • Сообщений: 249
  • Репутация: +3/-0
    • Просмотр профиля
Это же нужно устанавливать высоту в футере. А если не знаешь заранее сколько ссыллк там будет, то что каждый раз менять?
25 Сентября 2013, 17:30:07
Ответ #3
  • Старожил
  • ****
  • Сообщений: 293
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Апну тему ибо ничего не выходит)

Задал html и body мин высоту 100%. Соответственно фон какбы сдвинулся до низа. Структура сайта по-умолчанию
<html>
     <body>
          <page>
                <div header> <div content> <div footer>
          </page>
     </body>
</html>

В общем page не хочет расширяться в % до низа никак и я не понимаю почему. пробовал вставлять доп div между футером и контентом, но он тоже не помогает. То есть page расширяется только в пикселях и контентом. Помогите кто-нибудь) Может есть у кого уже готовый вариант. Шаблон стандартный.

Выглядит сейчас вот так.


Высота футера будет фиксированной, так что с этим проблем нет.
25 Сентября 2013, 17:52:18
Ответ #4
  • Старожил
  • ****
  • Сообщений: 293
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Короче проблема в том, что я создаю внутри <body> какой-нибудь div с высотой 100%, но он ограничивается высотой page. Неважно внутри page его создать или page внутри него.
25 Сентября 2013, 18:29:38
Ответ #5
  • Модератор
  • Ветеран
  • *****
  • Сообщений: 86335
  • Репутация: +25417/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Структура страницы
<body>
    <div id="page">
         <div class="wrap">...</div>
    </div>

    <div id="footer">...</div>

</body>
Стили
html, body {
  height: 100%;
  width: 100%;
}
#page {
  min-height: 100%;
  height: auto !important;
  height: 100%;
}
.wrap {
  padding-bottom: высота футера в px;
}
#footer {
  height: высота в px;
  margin-top: - высота футера в px;
}
25 Сентября 2013, 19:56:05
Ответ #6
  • Старожил
  • ****
  • Сообщений: 293
  • Репутация: +0/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Спасибо. Завтра попробую!