Почему высота элемента html не имеет эффекта?

<!DOCTYPE html>
<html>
<head>
  <style>
    html,
    body {
      font-size: 16px;
      width: 70vw;
      height: 40vh;
      background-color: yellow;
    }
    
    h1 {
      background-color: red;
    }
  </style>
</head>
<body>
  <h1>My First Heading</h1>
</body>
</html>

Ответ 1

Это действительно работает, но в CSS есть сложное место. html получает фон body, если он не установлен на html сам, а viewport заполняется фоном html (что единственное наследование от child в css).

Это поведение указано в Уровень фонов и границ CSS-фрейма Уровень 3:

Холст документа - это бесконечная поверхность, на которой визуализируется документ. [CSS2] Поскольку ни один элемент не соответствует холсту, чтобы позволить стилизации холста CSS распространяется фон корневого элемента

Для документов, корневым элементом которых является HTML-элемент HTML или элемент html XHTML [HTML]: если вычисленное значение фонового изображения в корневом элементе равно none, а его фоновый цвет прозрачен, пользовательские агенты должны вместо этого распространять вычисленные значения свойств фона из этих элементов сначала HTML BODY или элемент тела тела XHTML.

Я добавил фон к html в ваш пример, и вы можете видеть, это хорошо:

html, body {
  font-size: 16px;
  width: 70vw;
  height: 40vh;
  background-color: yellow;
}

html {
  background: white;
}

h1 {
  background-color: red;
}

<h1>My First Heading</h1>

Ответ 2

Причина, по которой вы видите весь фон как желтый, состоит в том, что

Фон корневого элемента становится фоном холста и охватывает весь холст [...]

Попробуйте дать другой цвет телу, и вы увидите разницу

<!DOCTYPE html>
<html>

<head>
  <style>
    html,
    body {
      font-size: 16px;
      width: 70vw;
      height: 40vh;
      background-color: yellow;
    }
    
    h1 {
      background-color: red;
    }
  </style>
</head>

<body style="background-color:blue;">
  <h1>My First Heading</h1>
</body>

</html>