Как растянуть div на всю высоту экрана так, чтобы тот находился под шапкой?

Question

Есть шапка сайта и div. Я ему задаю высоту 100vh и при этом он идёт после шапки, то есть возникает скролл. Мне бы хотелось, чтобы тот div растягивался на весь экран без скролла, то бишь находился под шапкой. Как такое реализовать?

Answer 1

Как вариант: растянуть div на 100vh, при этом в margin-top указать -значение высоты шапки. Всё работает.

Answer 2

Первое, что приходит в голову, шапку и див вложить родительский блок, дать ему Свойство display: flex и именно ему указать высоту в 100vh, а диву внутри при этом 100%. Цвет фона прикрутил для наглядности.

* {
  margin: 0;
  padding: 0;
}
.wrapp {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #ccc;
}
.div1 {
  background-color: #33ff10;
  height: 100%;
}

<div class="wrapp">
    <header>
      <h1>Шапка</h1>
    </header>
    <div class="div1">12</div>
  </div>
</body>

Впрочем, флексы могут некорректно работать в старых браузерах типа IE.

Answer 3

Используйте свойство calc() Пример:

html,
body {
  margin: 0;
  padding: 0;
}

.header {
  width: 100%;
  height: 100px;
  background-color: chocolate;
}

.wrapper {
  width: 100%;
  height: calc(100vh - 100px);
  background-color: gold;
}

<div class="header"></div>
<div class="wrapper"></div>

БЛОГ НА HUSL

Как растянуть div на всю высоту экрана так, чтобы тот находился под шапкой?

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