Set div elements to full screen

HTML

<div id="master">
    <div id="header">Header Here</div>
    <div id="content">Had to read the css spec on height to get an idea of what is really goign on <br/><br/> <a href="http://www.w3.org/TR/CSS21/visudet.html#propdef-height">w3c height rule</a><br/><br/>
          the two things I think that was messing us up is we weren't using a position of absolute and secondly we weren't specifying a height in all elements involved. <br/> At least I think.... I somewhat forgot what we were trying to fix</div>
      <div id="footer">bottom area</div>
<div>

CSS

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow:hidden;
}
#master{
    postion: relative
    height:auto;
    width:auto;
    margin:0;  
    display:block; 
}
#content{
    position:absolute;
    vertical-align:middle;
    width:100%;
    display: inline-block;
    top: 20px;
    bottom:30px;
    border:1px dashed blue;
overflow: auto;
}
#footer{
    position:absolute;
    vertical-align:middle;
    height: 30px;
    width:100%;
    display: inline-block;
    bottom:0;
    }

#header{
    position:absolute;
    vertical-align:middle;
    height: 20px;
    width:100%;
    display: inline-block;
    top:0;
    border:1px dashed yellow;
}