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

У меня есть особое требование реализовать дочерний div с полосами прокрутки, сохраняя при этом родительские и другие одноуровневые элементы фиксированными в своей позиции без других полос прокрутки. Это может показаться запутанным, позвольте мне объяснить это на примере:

Html-страница - исправлен порядок следующих элементов:

1. Панель навигации с фиксированным размером, скажем, 50px.
2. Основной контент с динамическим размером основан на вводе данных пользователем. Он может иметь полосы прокрутки.
3. Картинная галерея с фиксированным размером, скажем, 100px.
4. Панель навигации с фиксированным размером, скажем, 50px.

Приведенные выше утверждения являются не чем иным, как элементами html. Сначала у нас будет панель навигации с фиксированным размером, скажем, высотой 50 пикселей.

Тогда у нас будет наш основной элемент контента, и его ширина будет равна всей странице, а высота будет установлена ​​​​клиентом, и он может иметь полосы прокрутки, если размер контента больше. Предположим, клиент установил высоту этого элемента 950 пикселей, и мы загружаем изображение размером 3600x4000. В этом случае этот элемент должен иметь полосы прокрутки.

Тогда у нас будет галерея фиксированной высоты 100px.

Затем наш последний элемент снова является панелью навигации с фиксированной высотой, равной 50px.

Вы можете изобразить, что это будет единственное, что я хочу показать на странице, и для всей вышеуказанной ширины будет полная страница.

Это структура, которую я хочу, но есть сценарии, которые нам, возможно, придется учитывать при ее разработке.

1. В зависимости от конфигурации иногда мы показываем верхнюю панель навигации, иногда нижнюю панель навигации, а иногда и то, и другое.
2. Независимо от того, насколько велик контент, элемент контента должен иметь возможность отображать весь контент, может иметь полосы прокрутки.
3. В зависимости от конфигурации мы можем скрыть элемент галереи. Итак, у нас может быть галерея, а может и не быть.
4. Независимо от того, какое устройство мы используем, оно должно подойти. И должна быть только одна полоса прокрутки, и она должна быть в области содержимого, а не где-либо еще.
5. Всякий раз, когда мы скрываем или показываем какой-либо элемент, поскольку элемент содержимого имеет фиксированную высоту, поэтому он не может измениться, но родительский элемент и другие элементы одного уровня должны подстраиваться под размер экрана.
6. если размер элемента контента действительно мал, мы можем использовать какое-то значение по умолчанию, чтобы оно поместилось на экране.

Я также пробовал кое-что, но чтобы избежать нескольких полос прокрутки, нам пришлось исправить (на моем экране 780 пикселей - правильное значение) высоту. Также то же самое не работает на разных размерах экрана (устройствах).

    <div id = "parent" style = "height:780px;width:100%;border:blue 2px solid;">
    <div id = "navigationTop" style = "height:30px;width:100%;border:green 2px solid; text-align:center;">Navigation Top</div>
    <div id = "content1" style = "height:100%;width:100%;border:red 2px solid;overflow:auto;max-height:950px">
        <div id = "content" style = "height:950px;width:100%;border:red 2px solid;">
            <img src = "https://via.placeholder.com/3600" />
        </div>
    </div>
    <div id = "thumbnails" style = "height: 100px; width: 100%; border: pink 2px solid; text-align: center;">Thumbnails</div>
    <div id = "navigationBottom" style = "height: 30px; width: 100%; border: green 2px solid; text-align: center;">Navigation Bottom</div>
</div>

Чтобы избавиться от этого параметра или жесткого кодирования исправить высоту родителя, я попытался установить с помощью jQuery, вычислить высоту экрана и установить ее. Но все равно не повезло.

 $(document).ready(function () {
        var height = $(document).height();
        document.getElementById('parent').style.maxHeight = height;
    });

Я хочу реализовать это на чистом CSS или с минимальным JS/jQuery. Просто помните, что на всей странице должны быть только одна вертикальная и горизонтальная полосы прокрутки, и это тоже должно быть только для контента.

Спасибо заранее.