Как заполнить пустоту по высоте?

Question

[AE42]

Добрый день!
Как заполнить остаток места по высоте?
При этом должны сохраняться маржины и не должно быть скролла
height: 100vh; не помогает, появляется скролл

Пример:

Answer 1

[Борис Шпаковский]

height: 100vh; не помогает, появляется скролл

Дело в том, что браузер не учитывает высоту вашего навбара. Ее нужно вычесть из высоты дисплея. Делается это при помощи функции calc();
В вашем случае будет выглядеть так:

.main {
  display: flex;
  height: calc(100vh - 56px);
}

Answer 2

[Samuel_Leonardo]

Почистите стили по умолчанию для браузера,

body{
margin:0;
}

можно использовать бибиотеки типа reset.css или normalize.css

Answer 3

[Артем Золин]

Добавьте

body {
    overflow: hidden;
}