如何将 div 设置为浏览器窗口高度的 100%，但具有顶部和底部边距？答案

【问题标题】：How can I make a div 100% of the browser window height, but with a top and bottom margin?如何将 div 设置为浏览器窗口高度的 100%，但具有顶部和底部边距？
【发布时间】：2012-07-09 14:26:29
【问题描述】：

更具体地说，我有一个横跨浏览器窗口右侧的右侧边栏。那部分没有出现任何问题。但是，我希望它包含一个 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 上有一个顶部和底部边距？

【问题讨论】：

也许你应该画一张你所追求的图表？具有 100% 高度但具有顶部和底部边距的 div 没有多大意义..
我希望外部 div 的高度是用户浏览器窗口大小的 100%。我已经毫无问题地做到了这一点。我还希望在这个外部 div 中有一个 div，它有一个顶部和底部边距，否则会填充所有剩余的高度，不管它可能是什么。

标签： html css

【解决方案1】：

使用 -

小提琴 - 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;
}

【讨论】：

是的！绝对定位是关键。非常感谢！