How to Make Div 100% Height of Browser Without Vertical Scrolling of Header

How can I make DIV 100% height of browser without vertical scrolling of header

Here's a modern solution using flexbox. Regardless of the height of the header the rest of the elements will stretch vertically to fill the remaining space. Here's the fiddle: http://jsfiddle.net/mggLY/1/.

HTML:

<div id = "wrapper">
    <div class="header">Header</div>
    <div>
        <div class="leftpanel">Left Panel</div>
        <div class="rightpanel">Right Panel</div>
    </div>
</div>

CSS:

* {
    margin: 0;
    padding: 0;
    border: 0;
}

html, body {
    height: 100%;
}

.header{
    background: #333;
    padding: 15px;
    text-align:center;
    font-size: 18px;
    font-family: sans-serif;
    color: #fff;
}

.leftpanel{
    background: #CCC;
}

.rightpanel{
    background: #666;
}

#wrapper {
    height: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    outline: 1px solid red;
}

#wrapper > .header {
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
}

#wrapper > .header + div {
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
}

#wrapper > .header + div > div:first-of-type {
    -webkit-flex: 7 0 0;
    flex: 7 0 0;
}

#wrapper > .header + div > div:last-of-type {
    -webkit-flex: 3 0 0;
    flex: 3 0 0;
}

100% Div height without scrollbar

If my assumption I put forward in my comment to the question is right, then sidebar is 100% high, and on top of that you have a 23px header, so that causs your container to be 100% + 23px high.

In the future you will have in css calc() http://hacks.mozilla.org/2010/06/css3-calc/ . This will solve your problem.

Now, I guess you should calculate the height of the sidebar ( = height of container - 23px), by javascript.

How to create a div that occupy the whole screen and folds to an header when scrolling

If you want the div below the nav to span the remaining height use height: calc(100vh - 69px) where 69px can be the height of any fixed height object.

body {  margin: 0;}
.container {  width: 100%;  height: 100vh;  position: relative;}
.fixed-nav {  width: 100%;  height: 69px;  background-color: red;  color: white;  position: fixed;  top: 0;  left: 0;  z-index: 1000;}
.header {  width: 100%;  height: calc(100vh - 69px);  position: absolute;  left: 0;  bottom: 0;  background-color: red;  z-index: 1;  margin: 0;}
.more-content {  height: 100vh;  width: 100%;  margin: 20px;}

<div class="container">  <nav class="fixed-nav">NAV</nav>  <header class="header"></header></div><div class="more-content">Rest of webpage</div>