Блок на всю высоту экрана без использования vh

Question

Я бы хотел, чтобы .div3 был на 100% высоты экрана, но без использования vh, это можно сделать? Чтобы контент не обрезался, также
Без js

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  font-family: sans-serif;
}

.div1 {
  min-height: 100%;
}

.div2 {
  min-height: 100%;
}

.div3 {
  min-height: 100%;
  padding: 10px;
  background-color: #3656f7;
  color: white;
}

<div class="div1">

  <div class="div2">
    <div class="div3">
      123
    </div>

  </div>
</div>

Answer 1

Просто пробросьте высоту до нужного блока. Нужно от чего-то отталкиваться, а у Вас только <html> имеет внятные размеры. min-height - это "ограничитель", но не задание размера.

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  height: 100%;
  min-height: 100%;
}

.div1 {
  height: 100%;
  min-height: 100%;
}

.div2 {
  height: 100%;
  min-height: 100%;
}

.div3 {
  min-height: 100%;
  height: 100%;
  box-shadow: inset 0 0 30px red;
}

<div class="div1">

  <div class="div2">
    <div class="div3">
      123
    </div>

  </div>
</div>

Answer 2

Это будет работать вот так, без обрезания контена в .div3:

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  height: 100%;
}

.div1 {
  height: 100%;
}

.div2 {
  height: 100%;
}

.div3 {
  min-height: 100%;
  padding: 10px;
  background-color: #3656f7;
  color: white;
  font-size: 40px;
}

<div class="div1">

  <div class="div2">
    <div class="div3">
      123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123 123
    </div>

  </div>
</div>

БЛОГ НА HUSL

Блок на всю высоту экрана без использования vh

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