Как прижать footer к низу страницы

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

Вспоминая период, когда самому приходилось заниматься версткой, у меня постоянно возникали проблемы с висящим подвалом. Т.е когда контентента мало а экран высокий подвал располагается где ему и положено — под последним контейнером сайта оставляя под собой кусок незаполненного экрана. А меня это просто выводит из себя.

Времена идут, а проблема все еще актуальна, т.к. совсем недавно ко мне обратился Джуниор с просьбой закрепить подвал у низа окна браузера, пришлось вспоминать:)

Способ 1

div class="wrapper">
  <p>Контент</p>
  <div class="garant"></div>
  <!--garant--> 
</div>
<!--page-->
<div class="footer">
  <p>Текст в футере</p>
</div>
<!--footer-->
html, body {
	height: 100%;
}
.wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -100px;
}
.footer, .garant {
	height: 100px;
}

 Способ 2

<div class="header"> Шапка </div>
<div class="content"> Контент</div>
<div class="footer"> Футер </div>
html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
}
body {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	position: relative;
}
.header {
	height: 3em;
	width: 100%;
}
.content {
	padding-bottom: 100px;
}
.footer {
	height: 100px;
	width: 100%;
	position: absolute;
	bottom: 0;
}

Но не все так печально в скором будущем прижать футер к низу можно будет двумя строчками в CSS. А теперь смотрим как это делается на CSS3 и HTML5

Способ 3 (CSS3, HTML5)

<body>
    <header></header>
    <nav></nav>
    <main></main>
    <footer></footer>
</body>
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;  /* высота веб-страницы больше или равна высоте окна браузера */
  margin: 0;
}
main {
  flex: 1;  /* если содержимое body меньше высоты окна, то main будет растянут до нужной величины */
}

Я так считаю: не прижатый к низу страницы футер смотрится некрасиво, но он не является критической ошибкой, после которой невозможно пользоваться сайтом. Поэтому можно ограничится браузерами, поддерживающими display: flex; и vh.



Комментарии

  1. Артём

    Повторение, мать учения!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *


You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>