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

Question

body {
  position: relative;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: #000;
}

<body>
  <div class="header"></div>
  <div class="nav"></div>
  <div class="news"></div>
  <div class="footer"></div>
</body>

https://css-tricks.com/couple-takes-sticky-footer/ – entithat Nov 14 '20 at 12:39 — entithat, Nov 14 '20 at 12:39

score 1 · Answer 1 · answered Nov 14 '20 at 12:33

1

Попробовать заменить absolute на fixed

и добавить body margin 0

body {
  position: relative;
  margin: 0;
}
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #000;
}

answered Nov 14 '20 at 12:33

Dark_Sky

fixed это только поможет там где мало контента – Денис Соколов Nov 14 '20 at 12:58

score 1 · Answer 2 · answered Nov 14 '20 at 16:18

Допустим, наша страница на уровне футера делится на 3 блока:

<header>шапка</header>
<main>основное содержание</main>
<footer>футер</footer>

Тогда родительскому контейнеру, пусть это будет див с классов .wrapper, мы задаём:

.wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

Zhihar · Answer 3 · 2020-11-14T12:30:48.710

0

например так:

body {
    min-height: 100vh;
}

edited Nov 14 '20 at 12:30

answered Nov 14 '20 at 12:25

Zhihar

ну это получаеться а на странице где много контента всякого то там он просто зависает на середине экрана – Денис Соколов Nov 14 '20 at 12:29
тогда min-height: 100vh; – Zhihar Nov 14 '20 at 12:30

3 Answers3