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

Существует несколько способов для того чтобы прижать (приклеить, прилепить, позиционировать, как вам удобно), footer к низу страницы в HTML-документе. В данной статье мы рассмотрим три из них. Какой подойдёт именно вам, будет зависеть от требований к макету и ваших предпочтений.

Пример с CSS Flexbox + Шаблон

Прижмём футер, как следует) , к низу страницы с помощью использования CSS Flexbox.

HTML:

<body>
	<div class="wrapper">
		<!-- Заголовок -->
		<header>
		  HEADER
		</header>
		<!-- Основной контент страницы -->
		<main>
		  MAIN
		</main>
		<!-- Футер -->
		<footer>
		  FOOTER
		</footer>
	</div>
</body>

CSS:

/* Обязательные стили для расположения footer внизу */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
.wrapper {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
main {
  flex: 1;
}

/* Дополнительные стили. Меняете на свои */
header {
  background-color: bisque;
}
footer {
  background-color: #a8bebe;
}
header, main, footer {
  text-align: center;
  font-size: 20px;
  color: #000;
  padding: 30px;
}

Готовый шаблон Flexbox -> Пример – footer прижат к низу CSS Flexbox.

Пример с CSS Grid + Шаблон

Прижимаем футер, к низу страницы с помощью CSS Grid

HTML:

<body>
    <div class="wrapper">
        <!-- Заголовок -->
        <header>
          HEADER
        </header>
        <!-- Основной контент страницы -->
        <main>
          MAIN
        </main>
        <!-- Футер -->
        <footer>
          FOOTER
        </footer>
    </div>
</body>

CSS:

/* Обязательные стили для расположения footer внизу */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
.wrapper {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100%;
}

/* Дополнительные стили. Меняете на свои */
header {
  background-color: bisque;
}
footer {
  background-color: #a8bebe;
}
header, main, footer {
  text-align: center;
  font-size: 20px;
  color: #000;
  padding: 30px;
}

Готовый шаблон Grid -> Пример – footer прижат к низу CSS Grid.

Пример с использованием позиционирования

Прижимаем футер, к низу страницы с использованием позиционирования

HTML:

<body>
	<!-- Заголовок -->
	<header>
	  HEADER
	</header>
	<!-- Основной контент страницы -->
	<main>
	  MAIN
	</main>
	<!-- Футер -->
	<footer>
      FOOTER
    </footer>
</body>

CSS:

/* Обязательные стили для расположения footer внизу */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
}
main {
  min-height: calc(100% - 70px); /* 70px - это высота header, её и вычитаем */
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}

/* Дополнительные стили. Меняете на свои */
header {
  height: 70px;
  background-color: bisque;
}
footer {
  height: 70px;
  background-color: #a8bebe;
}
header, main, footer {
  text-align: center;
  font-size: 20px;
  color: #000;
}

Готовый шаблон с позиционированием -> Пример – footer прижат к низу с позиционированием.

Послесловие

На мой взгляд 1 и 2 способы являются наиболее оптимальными и просты в использовании. Так же рекомендую прописывать стили css, обращаясь через class, например <main class=’main’> и уже классу .main задавать стили.