100% 高度 div，由于 margin-top 50px，滚动条离开屏幕 50px。溢出自动

Question

我正在尝试布局一个页面，该页面顶部有一个水平导航栏，内容区域会在内容太大时获得滚动条。

我目前的做法是 div 宽度为 100%；高度 50 像素；绝对位置；前 0；左0；然后是高度为 100% 的第二个 div；宽度 100%；边距顶部 50px；溢出：自动；但是，出现的滚动条会偏移 50px 边距，因此会将内容推离页面底部。如果我删除边距，一切正常，但它会将内容放在导航栏后面。

我还尝试将它包装在一个容器中，尝试将它们的边距和溢出放在孩子身上，但这似乎仍然没有达到所需的效果。

jsFiddle，用 cmets 来更好地解释一下。

http://jsfiddle.net/Piercy/hggXJ/

HTML

<div id="nav">
  <h1>Navigation</h1>
</div>
<!-- <div id="contentContainer"> -->
  <div id="content">
    <div id="oversizeContent">
        <p>You can see the black border on this green box, but you cannot see the bottom black border. Similarly you cannot see the bottom arrow of the scrollbar.</p>
        <p>I tried putting a wrapper around the content and putting the margin on that but the scrollbar still over flows  Uncomment the contentContainer div and comment/uncomment the corresponding  css.</p>
    </div>
  </div>
<!-- <div> -->

CSS

html, body
{
  height:100%;
  overflow:hidden;
  color:white;
  font-weight:bold;
}

#nav
{
  height:50px;
  width:100%;
  background-color:red;
  position:absolute;
  top:0;
  left:0;
  z-index: 2;
}
#contentContainer
{
  /* uncomment this if you bring #contentContainer into play */
  /* 
      margin-top:50px;
      position:absolute;
      top:0;
      left:0;   
  */


  height:100%;
  width:100%; 

}
#content
{
  /* moving this into #contentContainer doesnt help either */
  /* comment this if you bring #contentContainer into play */

      margin-top:50px;
      position:absolute;
      top:0;
      left:0;



  width:100%;
  height:100%;

  background-color:blue;
  z-index: 1;
  overflow: auto;
}
#oversizeContent 
{
  background-color:green;
  width:400px;
  height:1000px;
  border:10px solid black;
}

Answer 1

而不是height:100%; 做bottom:0; 如果没有容器设置为position:relative;，它将转到相对父级或视口的底部

DEMO