height: высота блока и проценты
height задаёт высоту элемента, но фиксированное значение нужно согласовывать с объёмом содержимого и способом расчёта коробки.
Назначение
height задаёт высоту элемента, но фиксированное значение нужно согласовывать с объёмом содержимого и способом расчёта коробки.
Как это работает
Процентная высота часто требует определённой высоты содержащего блока. height:100% не означает автоматически «высота окна». Для адаптации к содержимому обычно безопаснее auto или минимальная высота.
Пример
<style>
.panel{height:8rem;overflow:auto;border:1px solid;padding:12px;box-sizing:border-box}
</style>
<div class="panel">Область фиксированной высоты. Добавьте сюда несколько абзацев, чтобы появилась внутренняя прокрутка.</div>Что должно получиться
Рамка имеет заданную высоту, включая padding благодаря border-box. При избытке содержимого прокручивается сама область, а не увеличивается её высота.
Граница применения и частая ошибка
Не фиксируйте высоту карточки с произвольным текстом без обработки переполнения. При увеличении шрифта содержимое может выйти наружу или стать недоступным.
Самостоятельная проверка
Увеличьте текст в два раза и добавьте несколько строк. Сравните height:8rem и min-height:8rem; объясните, какой вариант может вырасти вместе с содержимым.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.