How can I make a div 100% of the browser window height, but with a top and bottom margin?

Question

More specifically, I have a right sidebar that spans the right side of the browser window. That part hasn't presented any problems. However, I want it to contain a div that is also 100% of the browser height, but with a top and bottom margin. The contents inside this div will scroll if the content won't fit within the browser window height. I can't get it to work. Here is my code:

HTML:

<div class="outerWrap">
    <div class="innerWrap">
        // stuff
    </div>
</div>

CSS:

.outerWrap { // this works
    position: fixed;
    right: 0;
    top: 0;
    height: 100%;
    width: 277px;
}

.innerWrap { // this doesn't work
    width: 277px;
    margin: 152px 0px 10px 0px;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 100%;
}

How can I get this to work so I have a top and bottom margin on the inner div?

Answer 1

Use -

Fiddle - http://jsfiddle.net/EKm7p/

html, body{height: 100%;}
.outerWrap {    
    height: 100%;
    width: 277px;
    border: 1px solid #f00;
}
.innerWrap {
    margin: 152px 0px 10px 0px;
    overflow-y: scroll;
    width: 277px;   
    display: block;
    position:absolute;
    height:auto;
    top:0;
    left:0;
    bottom:0;
    background-color: green;
}