Increase div height with page height

Question

I'm trying to increase the height of a div to follow the bottom of the page, so far I've tried using height: 50vh but this causes the height to increase proportionally and not in parallel.

If you increase the height of this snippet (in full screen), you'll see what I mean. I basically want the bottom of the coloured div just above the word 'Portfolio', at the bottom of the screen, no matter how much height the page has.

#header-bg {
  height: 50vh;
  background-color: peachpuff;
}

#portfolio {
  width: 100%;
  text-align: center;
}

<div id="header-bg"></div>
<div id="portfolio">
  <h1>
    Portfolio
  </h1>
</div>

Answer 1

Using CSS flex you can assign an element to flex-grow using flex:1 to fill the remaining space:

/*QuickReset*/*{margin:0; box-sizing:border-box;}

html {height: 100%;}

body {   /* body, or any other parent container */
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

#header-bg {
  flex: 1;
  background-color: peachpuff;
}

#portfolio {
  text-align: center;
}

<div id="header-bg"></div>
<div id="portfolio">
  <h1>Portfolio</h1>
</div>