html – 100％高度div,由于margin-top 50px,滚动条50px关闭屏幕.溢出自动

我正在尝试布局一个页面,该页面在顶部和内容区域有一个水平导航栏,当内容太大时,它将获得滚动条.

我目前的做法是div宽度100％;身高50px;绝对的位置;前0;左0;然后是第二个高度为100％的div;宽度100％; margin-top 50px;溢出：汽车;但是,出现的滚动条会被50px的边距所抵消,因此会将内容从页面底部推出.如果我删除边距它一切正常但它将内容放在导航栏后面.

我也尝试将它包装在一个容器中进行试验,将边缘和溢出物放在孩子身上,但这似乎仍然没有达到要求的效果.

jsFiddle,有评论尝试更好地解释它.

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