100％高さdiv、スクロールバーが画面外に50pxあります。オーバーフローオート

Question

コンテンツが大きすぎるときにスクロールバーを取得するコンテンツ領域と上部に水平ナビゲーションバーがあるページをレイアウトしようとしています。

これを行う私の現在の方法はdiv幅100％です。高さ50px;絶対的な位置;トップ0。左に0;次に高さ100％の第2のdiv。幅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