html - 如何使 div 成为浏览器窗口高度的 100%，但具有顶部和底部边距？

Question

更具体地说，我有一个横跨浏览器窗口右侧的右侧边栏。那部分没有出现任何问题。但是，我希望它包含一个 div，它也是浏览器高度的 100%，但具有顶部和底部边距。如果内容不适合浏览器窗口高度，则此 div 中的内容将滚动。我无法让它工作。这是我的代码:

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%;
}

我怎样才能让它工作，以便在内部 div 上有顶部和底部边距？

Answer 1

使用 -

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;
}