100% Wysokość div, paski przewijania 50 pikseli poza ekranem z powodu marginesu-góry 50 pikseli. przepełnienie auto

Question

Próbuję układać stronę, która ma poziomy pasek nawigacyjny na górze i obszarze zawartości, który zwiększy paski przewijania, gdy zawartość jest zbyt duża.

Mój obecny sposób robienia tego to szerokość div 100%; wysokość 50 pikseli; pozycja absolutna; top 0; lewo 0; a następnie drugi element div o wysokości 100%; szerokość 100%; margin-top 50px; overflow: auto; jednak pasek przewijania, który się pojawi, jest przesunięty o 50 pikseli i jako taki wypycha zawartość z dolnej części strony. Jeśli usunę margines, wszystko działa, ale umieszcza zawartość za paskiem nawigacji.

Próbowałem również owijać go w pojemnik i eksperymentować z wprowadzeniem marginesu i przelewem w dziecku, ale wciąż nie przynosiło pożądanego efektu.

jsFiddle, z komentarzami, aby spróbować wyjaśnić to lepiej.

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

zamiast height:100%; zrobić bottom:0; i to pójdzie na dno względnej rodzica lub rzutni, jeśli nie ma pojemnik ustawiony position:relative;

DEMO