css - 位于固定元素内的 100% 高度 div？

Question

JSFiddle

<header>
    <p>
        header stuff
    </p>
     <div id="dropdown">
         <p>
             a
         </p>
         <p>
             b
         </p>
         <p>
             c
         </p>
   </div>
</header>

我有一个固定的 header 。在这里面我有一个下拉菜单，我想它是页面的 100% 高度，但是将高度设置为 100% 会使它成为父元素的 100% 高度。无论如何设置它是页面的 100%？

Answer 1

将 .dropdown 更改为:

#dropdown{
  position: absolute;
  width: 100%;
  height: 100vh;
  background: tomato;
  top: 100px;
}

已更新 fidde here