Не получается прикрепить footer вниз сайта
css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body, html {
height: 100%;
margin: 0;
font-family: 'Segoe UI', sans-serif;
color: #222;
background: #fff;
padding: 0;
display: flex;
flex-direction: column;
}
body {
display: flex;
flex-direction: column;
height: 100%;
}
main {
flex: 1;
}
.wrapper {
min-height: 100vh;
}
.footer {
background-color: #f0f0f0;
color: #222;
padding: 10px;
text-align: center;
margin-top: auto; /* Футер всегда внизу */
width: 100%;
}
html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Каталог | МойБренд</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="icon" href="img/icon.jpg">
</head>
<body>
<div class="wrapper">
<header class="main-header">
<div class="logo"><a href="index.html">МойБренд</a></div>
<nav>
<a href="index.html">Главная</a>
<a href="cart.html">Корзина</a>
<a href="about.html">О нас</a>
</nav>
</header>
<main class="catalog">
</main>
<footer class="footer">
<p>© 2025 МойБренд. Все права защищены.</p>
</footer>
</div>
</body>
</html>
не получается прикрепить footer к низу страницы. весит в воздухе.
да забей.
Надо сделать расширение блока main на всю свободную высотку межу хедером и футером:
#content {
display: flex;
flex-direction: column;
flex: 1;
Можешь там поразбираться:
https://local-disc.firebaseapp.com/menu/articles/HashRouter.html#/rust
Ты размещаешь всё содержимое страницы в <div class="wrapper">, а display: flex почему-то задаёшь для тега <body>. Так не работает: flex действует только на непосредственно вложенные блоки, а не на всю иерархию. И если ты размещаешь позиционируемые блоки внутри <div class="wrapper">, то и flex должен задаваться для .wrapper:
.wrapper {
min-height: 100vh;
display: flex;
flex-direction: column;
} А вот это вот margin-top: auto; /* Футер всегда внизу */ сдвигу подвала к низу окна никак способствует.