Как создать фиксированный футер, который остается внизу страницы на CSS?
Создание фиксированного футера, который всегда остается внизу страницы, независимо от содержания, обычно выполняется с помощью CSS. Фиксированный футер хорошо подойдет для веб-сайтов, где важно сохранить информацию, такую как контакты или навигационные ссылки, всегда доступной.
Пример разметки HTML
Начнем с базовой разметки HTML:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Фиксированный футер</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="content">
<h1>Добро пожаловать на мой сайт</h1>
<p>Здесь много интересного контента...</p>
<p>...</p> <!-- Добавьте больше контента для демонстрации прокрутки -->
</div>
<footer class="footer">
<p>© 2025 Мой сайт</p>
</footer>
</body>
</html>
CSS для фиксированного футера
Теперь давайте создадим стили в файле style.css, чтобы наш футер оставался внизу страницы.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh; /* Устанавливаем минимальную высоту для body */
}
.content {
flex: 1; /* Позволяет контенту занимать оставшееся пространство */
padding: 20px;
background-color: #f0f0f0;
}
.footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px;
}
Объяснение кода
*), чтобы убрать стандартные отступы и рамки по умолчанию.body display: flex и flex-direction: column, чтобы расставить дочерние элементы (в нашем случае это .content и .footer) в столбик. Мы задаем min-height: 100vh, чтобы body занимал как минимум 100% высоты видимой области.flex: 1 у .content позволяет этому блоку занимать все доступное пространство, в то время как футер будет прижат к низу благодаря природному поведению Flexbox.Проверка
Теперь, если вы добавите больше контента в блок .content, футер останется внизу страницы в любом случае, даже при прокрутке. Это обеспечивает легкость в навигации для пользователя.
Такой подход позволяет сохранить эстетичный и функциональный дизайн вашего сайта. Надеюсь, это поможет вам в разработке!