Как изменить размер страницы в зависимости от выпадающего?

Question

В настоящее время у меня есть контейнер div этого раздела страницы, который содержит 3 горизонтальных поля, которые раскрываются при нажатии для получения дополнительной информации. Однако, когда на любом из полей нажимают, последнее окно всегда немного обрезается. Контейнер этой страницы имеет фиксированный размер около 100vh, который отлично подходит для трех блоков, когда ни на одном из них не нажата кнопка. Я мог бы сделать vh намного выше, чтобы решить эту проблему, но было бы слишком много пустого пространства внизу, когда ни один из блоков не был нажат. Следовательно, есть ли способ «динамически» увеличить размер страницы в зависимости от того, когда на ячейки нажимают, а не нажимают.

Пример (что я хочу): Расширение (при нажатии) поля 2 увеличивает размер страницы со 100 до 120 вч, чтобы вместить все. Свертывание (при повторном нажатии) поле 2 уменьшает размер страницы со 120 до 100 ч.

Github-репо: https://github.com/robatras/Personal-Website Это происходит в разделе интересов

Текущее представление :

После нажатия на одно из полей:

Answer 1

Я использовал jQuery, чтобы сделать это. Надеюсь, это поможет вам

$(document).ready(function(){
    $('.maindiv div').on('click', function(){
        $('.maindiv div').css('height','100vh');
        $(this).css('height','120vh');
    });
});

.maindiv{min-height:310vh; padding:10px; border: 2px solid gray;}
.maindiv .div1{height: 100vh; background-color: yellow;}
.maindiv .div2{height: 100vh; background-color: pink;}
.maindiv .div3{height: 100vh; background-color: green;}

<div class="maindiv">
    <div class="div1">aa</div>
    <div class="div2">bb</div>
    <div class="div3">cc</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>