Прижать футер книзу страницы

Добрый день! А подскажите пожалуйста каким образом можно прижать футер книзу страницы, при условии, что футер должен быть частью основного блока, который располагается по центру страницы и сверху/снизу от него должны быть отступы. Пробовал этот способ - не помогло, так как там футер получается отдельно от основного блока, и получается что футер как бы "вываливается". сайт о котором идет речь http://yarrsk.ru/

upd! спасибо всем за ответы, но похоже решил данную проблему сам, определяем главный блок как таблицу, внутренний блок футера превращаем в строку этой таблицы, дополнительно вертикально выравниваем по низу:


  <div id="wrap">
   <div id="header">...</div>
   <div id="section">...</div>
   <div id="footer">...</div>
  </div>


html, body {height: calc(100% - 16px);}
body {margin: 16px;}
#wrap {display: table; position: relative; height: 100%; min-height: 100% !important;	margin: auto;}
#footer {display: table-row; vertical-align: bottom; position: relative; height: 144px;}

upd2! Почему то после того как блок футера превратил в строку таблицы, к нему перестали применяться паддинги и маргины, хз что делать, решил просто обернуть еще в один блок:


<div id="wrap">
 <div id="header">...</div>
 <div id="section">...</div>
 <div id="footer">
  <div id="footer_section">...</div>
 </div>
</div>


html, body {height: calc(100% - 16px);}
body {margin: 16px;}
#wrap {display: table; position: relative; height: 100%; min-height: 100% !important;	margin: auto;}
#footer {display: table-row; vertical-align: bottom; position: relative; height: 144px;}
#footer_section {display: block; padding: 16px}

  • Вопрос задан
  • 36538 просмотров
Пригласить эксперта
Ответы на вопрос 10
Sky4eg
@Sky4eg
Web разработчик


html,
      body {
        height: 100%;
      }
      #wrap {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        margin: 0 auto -60px;
      }

      #push,
      #footer {
        height: 60px;
      }


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

Ответ написан
@exdeniz

Последнее время для нормальных браузеров использую flex model для прижатия футера к низу. Заодно растягиваем content часть максимально. Работает везде.
Ссылка

Ответ написан
IonDen
@IonDen
JavaScript developer. IonDen.com

Пробуйте position:fixed

Ответ написан
Комментировать
@juliusgromyko

Если футер фиксированного размера, скажем 10em, то можно вот так:


<div class="page-content">
  Content!
</div>

<footer class="page-footer">
  I'm the Sticky Footer.
</footer>


* {
  margin: 0;
}
html, body {
  height: 100%;
}
.page-content {
  min-height: 100%;
  margin-bottom: -10em; 
}
.page-content:after {
  content: "";
  display: block;
}
.page-footer, .page-content:after {
  height: 10em; 
}
.page-footer {
  background: orange;
}

Ответ написан
parmactep
@parmactep


<div class="wrap">
...
	<div class="footer">
		Я футер
	</div>
</div>

html, body {
	min-width: 100%;
}
.wrap {
	min-height: 100%;
	position: relative;
	padding-bottom: 100px;
}
.footer {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100px;
}

Ответ написан
spmbt
@spmbt
...при условии, что футер должен быть частью основного блока, который располагается по центру страницы и сверху/снизу от него должны быть отступы.

Основное правило гласит, что все старшие и соседние элементы страницы должны быть с процентными стилями. Если, конечно, хотите сделать это на CSS без JS. Например, даже футер Хабра прилепляется к низу, если скриптами и юзерстилями записать резметке страницы такие правила. Бывает такая раскладка, что процентные стили расставить будет невозможно.

В Вашем случае - то, что по центру (по горизонтали) - несущественно. А вот Хедер и футер у вас должны быть сделаны 0% высоты, а остальными стилями вставить в них нужную ненулевую высоту блоков. Пример того, как это делается со страницами Хабра, описан здесь: http://habrahabr.ru/post/151320/ чтобы увидеть, как работает - поставить скрипт (лучше на Firefox или старую Оперу, там надёжнее работало) и перейти на короткую страницу, например, эту https://auth.habrahabr.ru/settings/privacy/ (до вчера работали QA, где было много коротких страниц). Так же будут работать и короткие статьи и прочее, например, страница подготовки статьи.

Ответ написан
Комментировать
Fiasco
@Fiasco Автор вопроса

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

Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы