max-height: ограничение высоты прокручиваемого блока
max-height устанавливает верхнюю границу высоты, сохраняя возможность меньшего размера при коротком содержимом.
Назначение
max-height устанавливает верхнюю границу высоты, сохраняя возможность меньшего размера при коротком содержимом.
Как это работает
В сочетании с overflow:auto длинный блок получает внутреннюю прокрутку. Короткий блок остаётся по содержимому; max-height само по себе не задаёт обязательную высоту.
Пример
<style>
.log{max-height:7rem;overflow:auto;padding:12px;border:1px solid;line-height:1.8}
</style>
<div class="log" tabindex="0" aria-label="Учебный журнал">Строка 1<br>Строка 2<br>Строка 3<br>Строка 4<br>Строка 5<br>Строка 6</div>Что должно получиться
Журнал ограничен по высоте и прокручивается при переполнении. Доступное имя объясняет назначение фокусируемой области, а содержимое остаётся обычным текстом.
Граница применения и частая ошибка
Не создавайте множество маленьких прокручиваемых областей без необходимости. Пользователь должен понимать, какая область движется и как добраться до всего текста с клавиатуры.
Самостоятельная проверка
Сравните один абзац с десятью. Проверьте прокрутку клавиатурой и видимость фокуса; ограничение не должно отрезать содержимое без доступного способа прочитать продолжение.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.