Html 100%高度div，滚动条50px离开屏幕，因为页边距最高为50px。溢出自动

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

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

我还试着把它包装在一个容器里，试着把边距和溢出物放在孩子身上，但这似乎仍然没有达到要求的效果

jsFiddle，带有注释，试图更好地解释它

HTML

---

而不是

高度：100%执行<代码>底部：0position:relative，则它将转到相对父对象或视口的底部

您是否尝试过将
#内容{margin bottom:50px；}
放在页边顶部以解决此问题？我必须保持页边顶部，但添加底部：0；去除高度：100%；好像是这么做的！谢谢，很高兴能帮上忙。。。如果你有绝对定位元素，那么使用top、bottom、left和right而不是height和width属性通常会非常方便。我还必须使用“position:fixed”而不是绝对属性，这样，如果主页上有滚动条，100%的高度内容就不会从窗口中滚动出去。
<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> -->

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