ブラウザが小さすぎてすべてのコンテンツを表示できない場合にのみ、固定要素にスクロールバーを表示しようとしています。
また、ページの下部に固定フッターがあります。固定要素のコンテンツがフッターの後ろに移動したら、スクロールを開始するのが理想的です。
これが私の問題の簡単な例へのリンクです。 http://jsfiddle.net/alsweeet/pGFzF/1/
<div id="container">
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li>
<li>Item</li>
</ul>
</div>
<div id="footer"></div>
#container{
color: #fff;
position: fixed;
top: 200px;
left: 0;
width: 100%;
background: red;
overflow: auto;
}
#footer{
position: fixed;
height: 50px;
width: 100%;
bottom: 0;
left: 0;
background: #000000;
}
コンテナは上から一定の距離にあるので、単純に高さをパーセンテージで表すことはできません。
これはかなり一般的な問題だと思いますが、私はこれに遭遇したことがなく、グーグルから答えを絞り出すための魔法の言葉を見つけることができませんでした。
有益なアドバイスを事前に感謝します。