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

Создание сайта
Комментариев нет

Посмотрим как прижать футер к низу страницы в браузере на CSS.

Например, у нас есть стандартное расположение:

  • Header
  • Main (Тело страницы)
  • Footer

Смотрим код:

index.html

<!DOCTYPE html>
<html>
	<head>
		<title>Прижать футер к низу страницы</title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body>
		<div class="wrapper">
			<header class="header">Header</header>
			<main class="main">Main (Тело страницы)</main>
			<footer class="footer">Footer</footer>
		</div>
	</body>
</html>

Здесь у нас есть общий div с классом wrapper, которому мы задаём параметр display: flex и расположение внутренним блокам вниз (flex-direction: column).

margin: 0 у нас всегда убирает лишние отступы у html и body. Им же мы и добавляем 100% ширины (height: 100%) и такую же (min-height: 100%) минимальную ширину wrapper.

Важным параметром здесь является flex: 1 1 auto, что по сути является короткой записью, но нам достаточно указать здесь только flex-grow: 1, который и определяет как много свободного пространства во flex-контейнере должно быть назначено текущему элементу. И всё заработает.

style.css

html, body {
	margin: 0;
	height: 100%;
}

.wrapper {
	min-height: 100%;
	display: flex;
	flex-direction: column;
}

.main {
	flex: 1 1 auto;
}

Как прижать футер (footer) к низу страницы? 1 - lenium.ru
Ужасно..Плохо..Нормально!Хорошо!Отлично! (Пока оценок нет)
Загрузка...

Поделиться:

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

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