Попытка получить какой-то прокручиваемый контейнер с динамической высотой

Question

У меня есть <div> с некоторым динамическим содержимым внутри - иногда это таблица, иногда текст. Я пытаюсь установить какой-то контейнер, который можно прокручивать по оси Y, если его содержимое слишком велико для экрана.

Некоторые поиски в Google предполагают, что это легко сделать, если вы жестко кодируете height из div, но что мне делать, если я хочу избежать точного указания размеров пикселей в любом месте?

Исходя из того, что я понимаю, мне придется сначала вычислить оставшееся вертикальное видимое пространство на экране, а затем установить его как div height. Это кажется довольно распространенной задачей, но я не могу найти какие-либо компоненты (все равно, если они jquery зависят или нет), которые бы выполнить это.

Есть предложения? Уже существующее решение (плагин, библиотека и т. Д.) Является предпочтительным.

Answer 1

Если вы хотите, чтобы высота контейнера начала прокручиваться, когда она совпадает с высотой области просмотра, вы можете просто присвоить ей height или max-height, равную 100vh (100% высоты области просмотра).

Если за пределами контейнера есть другие элементы, и он не должен занимать всю высоту экрана, вы можете использовать calc(), чтобы ограничить его:

.container { max-height: calc(100vh - 100px); }