位于固定元素内的100％高度div？

Question

JSFiddle

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

I have a header that's fixed. Inside this I have a dropdown which i want to be 100% height of the page, yet setting height to 100% makes it 100% height of the parent element. Is there anyway to set it to be 100% of the page?

Answer 1

change .dropdown to:

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

updated fidde here