Divは過去のページの高さを拡張しますが、スクロールバーはありません

Question

ナビゲーションリンク用のページの左側にdivがあります。ヘッダーをクリックすると、リンクのサブセットが展開されます。このdivはページの高さの100％に設定されているので、列はページの左側全体を占めます。この問題は、すべてのサブカテゴリが展開された場合に発生します。 divの内容はページの一番下にありますが、スクロールバーは追加されません。

高さをautoに設定して問題を解決できるかどうかを確認しましたが（左側の全体を占めていないという事実は無視していますが）、どちらも修正されませんでした。

divがページの高さを超えて拡大するときにスクロールバーを取得するにはどうすればよいですか？必要がない場合はスクロールバーを消してください。

ありがとうございます。

.leftNavigation { 
display:block; 
position:fixed; 
width:200px; 
height:100%; 
top:140px; 
left:0; 
background-color:#f0f0f0; 

}

<div class="leftNavigation"> 
    <p class="linkHeader" id="townLinksHeader"><img src="img/image.jpg" width="200" height="40" alt="Sunnyvale, CA" /></p> 
    <div class="links" id="townLinks"> 
     <ul> 
      <li><a href="">Link</a></li> 
        <li><a href="">Link</a></li> 
        <li><a href="">Link</a></li> 
        <li><a href="">Link</a></li> 
     </ul> 
    </div> 

左側のナビゲーションdivの内側の4段落/ divの組み合わせがあります。段落だけがクリックされるまで表示されます。リンクdivが表示されます。それらのそれぞれが展開されると、ページの一番下にありますが、スクロールバーは追加されません。

オーバーフローの追加：autoは何も変更しませんでした。

Answer 1

サイドコンテンツdivは固定配置を使用していますか？これは、通常、スクロールバーが表示されない理由です。そのdivにoverflow:auto CSSスタイルを設定して、必要なときにスクロールバーを追加してみてください。

更新：そこでは140px、高さ：100％

あなたがトップを持っています。これは実際にサイドdivをページの下に押し込んでいます。展開可能なコンテンツが多くのスペースを占有していない場合は、ページの下部から流出し、スクロールバーは表示されません。何かが置か '固定' されている場合、それはスクロールバーを追加しません

.leftNavigation { 
    display:block; 
    position:fixed; 
    width:200px; 
    height:100%; 
    top:0; 
    left:0; 
    padding-top:140px; 
    overflow:auto; 
    background-color:#f0f0f0; 
} 

Answer 2

：

はこれを試してみてください。 position: relativeで配置してみるか、top: 0に設定してください。 top：0でもまだ十分でない場合は、高さをウィンドウよりも小さい固定高さに設定する必要があります。

Answer 3

.leftNavigation { 
    display:block; 
    position:fixed; 
    width:200px; 
    height:100%; 
    top:0; 
    bottom:0; 
    left:0; 
    margin-top: 140px; 
    overflow:auto; 
    background-color:#f0f0f0; 
} 

今は正しいです。