div推另一个div

Question

我看到了类似的问题，但与我的不同。我正在一个高度固定的网站上工作。所有内容都位于固定标题下方的主要部分。当我的固定菜单甚至不重叠时，它们会在调用时不断向下推内容。我的代码...简化了。

<header>
 <div class ="content">
     <--- content here ->
 </div>
 <div class="menu">
  <----fixed menu content here --->
 </div>
 <---- js to display fixed menu --->
</header>

<main>
  <section> content here </section>
  <section> content here </section>
  <section> content here </section>
<main>

我的 CSS：

 header {position:fixed; top 0; height:50vh; }
 menu {position: fixed; top:0; height: 0; width: 100%; }
 main {margin-top:50vh; }

 

我的 JS：

<script>
    function openNav() {
     document.getElementById("menu").style.height = "50vh";
    }

    function closeNav() {
     document.getElementById("menu").style.height = "0";
    }
</script>

启用固定菜单时，菜单会替换整个标题。这就是我想要的。那部分有效。当您查看第一部分内容时。它也有效。但是启用菜单时第一部分下方的任何内容只会将内容一直推回第一部分。任何帮助表示赞赏。如果有更好的方法可以做到这一点，我也愿意接受建议。

Answer 1

想通了。这是我切换固定菜单的链接。因为它是一个链接而不是一个按钮，所以它会一直滚动到链接。