如何根据下拉菜单更改页面大小？

Question

目前，我有一个此页面部分的 div 容器，其中包含 3 个水平框，单击时会下拉这些框并提供更多信息。 然而，当点击任何一个框时，最后一个框总是被截断一点。 此页面的容器具有大约 100vh 的固定大小，当三个框都没有被点击时，它可以很好地适应三个框。 我可以将 vh 设置得更高来解决这个问题，但是当没有点击任何框时，底部会有太多的空白。 因此，有没有一种方法可以根据单击和未单击框的时间“动态”增加页面大小。

Ex（我想要的）：扩展（通过单击）框 2 将页面大小从 100 vh 增加到 120 vh 以适应所有内容。 折叠（再次单击）框 2 将页面大小从 120 vh 减小到 100 vh。

Github repo: 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>