Two divs bottom div to height adjust with browser window [duplicate]

Question

I have a header div and a div underneath it. I need the div underneath the header div to adjust depending on the height of the browser window size.

In CSS, when I add height:100% it creates a scroll bar at the side of the page. When I adjust the percentage of the width, spacing at the bottom of the page constantly changes because it is done with percentages.

I would like the div below the header to always adjust with the window size in height with no spacing at the bottom.

How do I do this?

Here is the Fiddle

JS Fiddle I am not sure why but in JSFiddle the bottom div is not extending height: 100%

here is the code: HTML

 <div class = "main">
  Header
 </div>
 <div class="left">
  Bottom Div
 </div>

CSS

.main {
width:100%;
height:60px;
border: solid;
}

.left {
height: 100%;
width: 300px;
border:solid;
}

Answer 1

try to use something like this code

html:

<div class = "main">
     Header
</div>
<div class="left">
    Bottom Div
</div>

css:

* {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box; 
}
html, body {
    height:100%;
} 
body {
    padding:60px 0 0 0; /* 60 — header height*/
    margin:0;
}
.main,
.left {
    border:1px solid #000;
}
.main {
    width:100%;
    height:60px;
    margin-top: -60px;  /* 60 — header height*/
}

.left {
    height: 100%;
    width: 300px;
}