Установите высоту таблицы в процентах от оставшейся высоты страницы

Question

У меня есть веб-страница, которую я уже разработал. При этом часть заголовка занимает 161 пикселей в высоту. Оставшееся у меня место - calc(100vh - 161px). В этом пространстве у меня есть две таблицы. Я хочу также иметь полосу прокрутки для этой таблицы. Для этого мне нужно установить высоту для этого tbody и overflow-y: auto.

Я хочу, чтобы высота для первого стола составляла 30%, а для второго стола - 70%, чтобы она работала на всех устройствах, размер которых превышает 768 пикселей.

Как установить высоту этих таблиц?

Answer 1

Полагаю, это то, что вы просите. Получите оставшуюся высоту и умножьте ее на нужный вам%.

.my-first-table {
    height: calc((100vh - 161px) * 0.3);
}
.my-second-table {
    height: calc((100vh - 161px) * 0.7);
}