Expandable DIV Depending on Viewport

Question

Im trying to make a div which width and height will shrink or expand proportionally depending on the viewport. As you can see on the example above this method will only make my div expand horizontally but not vertically(fixed height). If I try to give percentages for the height values of my wrapper or main_content, the browser simply ignores the height values unless they are given in pixels or ems. How can I make this work? In my head, if I could just give my div's height a percentage value this would solve the issue right?

<div class=".wrapper">
  <div id="main_content"></div>
<div>

.wrapper{
   width: 80%;
   margin : 0 auto;
}

#main_content{
  width : 100%;
  height : 500px;
} 

Answer 1

Short answer:

html, body {
    height: 100%;
}

Long Answer:

Your html and body are also containers and they have height that automatically scales with content. Unfortunately, when you set height: 100% in your wrapper, the height is set as 100% of the container, which is automatically the height of your wrapper sans padding and margins. The solution is then to set the height of html to be 100% of its parent, the actual document and then set the height of the body to be 100% of its parent, html. Then your wrapper will be able to be set to a percentage of the height of the document.