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

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

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

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

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

HTML

Navigation

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.

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.

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;

}