Решение проблемы высоты div в % с DOCTYPE HTML 5 в CSS

Быстрый ответ

Чтобы верно применить процентную высоту, нужно указать определённую высоту для всех родительских контейнеров, начиная с html и body и установив их высоту в 100%:

html, body { height: 100%; }

.child { height: 50%; } /* Такой элемент будет занимать половину высоты окна просмотра */

То есть, .child будет занимать ровно половину окна браузера.

Адаптивные макеты при помощи единиц вьюпорта

Единицы вьюпорта позволяют элементам масштабироваться в соответствии с размером экрана. Единица vh (высота вьюпорта) определяет высоту элемента в процентах от высоты видимой области браузера:

.child { height: 50vh; } /* Элемент будет иметь высоту 50% от высоты окна просмотра */

Такой подход поддерживают IE9 и все более новые версии, а также все современные браузеры. Помните, что при использовании процентов для высоты, всем родительским элементам, начиная от тега html, должна быть назначена конкретная высота.

Сохранение пропорций при адаптивных дизайнах

Чтобы сохранить соотношение сторон изображений и контейнеров, вы можете использовать свойство aspect-ratio. При зазначении пропорций ширины и высоты, вы сможете сохранить их неизменными при изменении размеров вьюпорта:

.responsive-box { 
  aspect-ratio: 16 / 9; 
  width: 100%; /* Высота будет подстраиваться автоматически, что весьма удобно */
}

Это решение идеально подходит для адаптивного дизайна, отпуская вам руки от необходимости применять медиазапросы.

Гибкость благодаря flexbox

Flexbox отлично подходит для создания гибких макетов. Он позволяет удобно управлять распределением пространства между элементами и выровнять их. Так, justify-content: space-between равномерно распределяет элементы внутри контейнера:

.flex-container {
  display: flex;
  justify-content: space-between;
}

Таким образом, дочерние элементы будут равномерно отстоять друг от друга, независимо от размера контейнера, что весьма полезно для адаптивного дизайна.

Визуализация

Можно представить вашу веб-страницу как холст в рамке:

|-----------------| 
|                 |
|   🎨 Веб-страница |
|    Холст        |
|                 |
|-----------------|
 🖼️ Рама

Процентная высота в CSS аналогична указанию:

"Заполни холст до 🎯 70% высоты рамы, даже если высота рамы изменилась."

Если высота рамы не задана, размеры холста становятся неопределёнными:

|-----------------| 
|    🎨 Веб-страница|
|    Холст (?)     |
🧩 ????

Убедитесь, что высота рамы (родительского элемента) задана, чтобы холст (веб-страница) мог определить, сколько у него пространства под контент.

Отладка процентных высот

Если у вас возникли проблемы с процентными высотами:

• Валидация HTML: Удостоверьтесь, что HTML соответствует стандартам.
• Контекст контейнера: Если родитель имеет position: absolute, но высота не задана, это может помешать выполнению вашего плана.

• Динамические высоты с padding: Для квадратных элементов:

  CSS

  Скопировать код

  .square-container {
    position: relative;
    height: 0;
    padding-bottom: 100%; /* Так вы получите квадрат с соотношением сторон 1:1 */
  }
  .content {
    position: absolute;
    height: 100%;
    width: 100%;
  }

  Запустить код

• Используйте инструменты разработчика: Всегда помните о возможности использовать инструменты разработчика для отладки в реальном времени.

Полезные материалы

1. Полное руководство по Flexbox | CSS-Tricks
2. Основные концепции flexbox – CSS | MDN
3. CSS Height, Width и Max-width | W3Schools
4. Структурные особенности стилизации модального окна | CSS-Tricks
5. Блочный контекст форматирования – Руководства разработчика | MDN
6. Высота равна динамической ширине (CSS fluid layout) – Stack Overflow