CSS Burger菜单100页面高度减去无固定标题

Question

我有一个汉堡菜单，与部分内容重叠。

$(document).ready(function() {
  $('#burger').on('click', function() {
    $('#menu').toggle();
  });
});

* {
  padding: 0;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: relative;
}

header {
  padding: 5px;
  height: 55px;
  background-color: red;
}

#burger {
  border: 1px solid #000;
  font-size: 1.2em;
  width: 20px;
  height: 20px;
  text-align: center;
  cursor: pointer;
}

#menu {
  display: none;
  position: absolute;
  width: 100%;
  height: calc(100% - 65px);
  background-color: lightyellow;
  top: 65px;
}

#content {
  flex: 1;
  background-color: green
}

p {
  margin: 5px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<header>
  <p>header</p>
  <div id="burger">=</div>
</header>
<div id="content">
  <div id="menu">
    <p>Home</p>
    <p>Trending</p>
  </div>
  <p>hey 1</p>
  <p>hey 2</p>
  <p>hey 3</p>
  <p>hey 4</p>
  <p>hey 5</p>
  <p>hey 6</p>
  <p>hey 7</p>
  <p>hey 8</p>
  <p>hey 9</p>
  <p>hey 10</p>
</div>

（codepen）

我希望菜单的页面高度减去标题的高度为100。标头不是固定的，因此如果页面向下滚动一点，我在底部会有问题：

header {
  height: 55px;
  padding: 5px;
}

#menu {
  position: absolute;
  height: calc(100% - 65px);
}

是否可以为菜单提供标题高度的自动值，或者这仅适用于固定标题吗？

这是我没有100身高的依据：

header {
  height: 55px;
}

#menu {
  position: absolute;
}

$(document).ready(function() {
  $('#burger').on('click', function() {
    $('#menu').toggle();
  });
});

* {
  padding: 0;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  padding: 5px;
  height: 55px;
  background-color: red;
}

#burger {
  border: 1px solid #000;
  font-size: 1.2em;
  width: 20px;
  height: 20px;
  text-align: center;
  cursor: pointer;
}

#menu {
  display: none;
  position: absolute;
  width: 100%;
  background-color: lightyellow;
  top: 65px;
}

#content {
  flex: 1;
  background-color: green
}

p {
  margin: 5px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<header>
  <p>header</p>
  <div id="burger">=</div>
</header>
<div id="menu">
  <p>Home</p>
  <p>Trending</p>
</div>
<div id="content">
  <p>hey 1</p>
  <p>hey 2</p>
  <p>hey 3</p>
  <p>hey 4</p>
  <p>hey 5</p>
  <p>hey 6</p>
  <p>hey 7</p>
  <p>hey 8</p>
  <p>hey 9</p>
  <p>hey 10</p>
</div>

（codepen）

Answer 1

您应该使用offsetHeight这将计算标题的高度。

$(document).ready(function() {
  $('#burger').on('click', function() {
    $('#menu').toggle();
  });
  
  
});

const header = document.querySelector("header");

document.querySelector("#menu").style.height = "calc(100% - " + header.offsetHeight + "px)";

* {padding:0; margin:0;}
body {display:flex; flex-direction:column; height:100vh; position:relative;}
header {padding:5px;height:55px; background-color:red;}
#burger {border:1px solid #000; font-size:1.2em; width:20px; height:20px; text-align:center; cursor:pointer;}
#menu {display:none; position:absolute; width:100%; background-color:lightyellow; top:65px;}
#content {flex:1; background-color:green}
p {margin:5px}

<header>
  <p>header</p>
  <div id="burger">=</div>
</header>
<div id="content">
  <div id="menu">
  <p>Home</p>
  <p>Trending</p>
</div>
  <p>hey 1</p>
  <p>hey 2</p>
  <p>hey 3</p>
  <p>hey 4</p>
  <p>hey 5</p>
  <p>hey 6</p>
  <p>hey 7</p>
  <p>hey 8</p>
  <p>hey 9</p>
  <p>hey 10</p>
</div>