Footer не опускается вниз страницы. Появляется скролл. Как это исправить?

Question

В блочной верстке футер не прижимается к низу экрана. На ноутбуке появляется скролл, а на широком экране не доходит до конца вьюпорта. Может, быть я не ту высоту поставила? На всех экранах должно быть одинаково. Ссылка на код:

<https://codepen.io/nvanyukova/pen/ZEWyqKY>

Answer 1

Вот так будет проще и правильнее всего

body {
  margin: 0;
}

header,
footer {
  height: 50px;
  width: 100%;
  background: red;
}

.container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.wrapper {
  display: flex;
}

nav {
  height: calc(100vh - 100px);
  width: 100px;
  background: orange;
}

<div class="container">
  <header>header</header>
  <div class="wrapper">
    <nav>nav</nav>
    <main>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque qui doloremque nostrum dolore nesciunt culpa totam soluta ipsam ipsum, exercitationem ullam perferendis maxime quam sed doloribus autem, accusamus excepturi expedita?</main>
  </div>
  <footer>footer</footer>
</div>

БЛОГ НА HUSL

Footer не опускается вниз страницы. Появляется скролл. Как это исправить?

Ответы (1 шт):