100% Высота div, полосы прокрутки 50 пикселей вне экрана из-за крайности 50px. overflow auto

Question

Я пытаюсь развернуть страницу с горизонтальной навигационной панелью поверх верхней и области содержимого, которая будет получать полосы прокрутки, когда содержимое слишком велико.

Мой текущий способ сделать это - ширина ширины 100%; высота 50 пикселей; позиция абсолютная; top 0; left 0; а затем второй div с высотой 100%; ширина 100%; margin-top 50px; переполнение: авто; однако появившаяся полоса прокрутки смещается на 50 пикселей и, как таковая, выталкивает контент из нижней части страницы. Если я удаляю маржу, все работает, но она помещает содержимое за панель навигации.

Я также попробовал обернуть его в контейнер, поэкспериментируя с помещением поля и переполнением в ребёнке, но это все еще не показало требуемого эффекта.

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

Answer 1

вместо height:100%; сделать bottom:0;, и она будет идти на дно относительного родителя или окна просмотра, если нет контейнера установлен position:relative;

DEMO