html - Content area height 100% taking the header into account -

i trying fill length of screen content area of 100% height ignores header makes area long. other solutions not work.

i need able adjust growing content (with scroll bar on page not #mainview), , when there not enough content fill page, #mainview should fill screen (with no scrolling).

http://jsfiddle.net/ssf8s/6/

css:

html, body { height: 100%; margin: 0px; } #container{margin:20px;height:100%} #header { height: 80px; background: pink; } #mainview { height: 100%; background: red; box-sizing: border-box; border:solid 4px pink;border-top:none; } 

html:

<div id="container">    <div id="header">      --header    </div>    <div id="mainview">      --main    </div> </div> 

let header overlay main view, , pad top of main view avoid it:

#header {   height:80px;   background:black;   position: absolute;    top: 0;    left: 0;   width: 100%;  }  #mainview {    height:100%;    background:red;   padding-top: 80px;   box-sizing: border-box;   -moz-box-sizing: border-box;    -webkit-box-sizing: border-box;  } 

updated jsfiddle solution: http://jsfiddle.net/upqpj/