Как разместить контент в середине верхнего и нижнего колонтитула?

Question

Я сделал страницу html с «временной шкалой», которая на самом деле является таблицей с большим количеством ячеек, на следующей странице эта временная шкала имеет основное содержимое, а над ним есть заголовок с навигационной панелью и ниже. это нижний колонтитул с другими данными ..

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

Итак, вопрос в том, как установить содержание в середине заголовка и нижнего колонтитула?

Тело выглядит так и может иметь сотни ходов

<tbody id="timeline"><tr id="1" data-salatav="1" class="table-row"><th scope="row" class="noselect row-head text-left">T. 1<span class="badge badge-dark ml-1">2</span></th><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td></tr><tr id="2" data-salatav="1" class="table-row"><th scope="row" class="noselect row-head text-left">T. 2<span class="badge badge-dark ml-1">2</span></th><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td></tr><tr id="3" data-salatav="1" class="table-row"><th scope="row" class="noselect row-head text-left">T. 3<span class="badge badge-dark ml-1">4</span></th><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td></tr><tr id="4" data-salatav="1" class="table-row"><th scope="row" class="noselect row-head text-left">T. 4<span class="badge badge-dark ml-1">2</span></th><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td></tr><tr id="5" data-salatav="1" class="table-row"><th scope="row" class="noselect row-head text-left">T. 5<span class="badge badge-dark ml-1">3</span></th><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td><td style="padding: 0px; position: relative; z-index: 1;"></td></tr></tbody>

, поскольку файл html слишком большой, я выложу ЗДЕСЬ JSFiddle со всеми css и html часть.

Answer 1

Уменьшение максимальной высоты tableFixedHead Показано ниже

.tableFixHead {
    max-height: calc(100vh - 114px);
    overflow-y: scroll;
}

Обновление
calc частично поддерживается в Internet explorer (IE) Подробнее здесь