固定位置要素の後ろのスクロールを防止する

Question

ページの下部に高さが設定されたフッターがあります。私のページのコンテンツをスクロールして、固定フッターの一番上で終わるようにすることは可能ですか？

ここに私の問題のバイオリン：fiddle

最後の250ピクセル（フッタの高さ）非固定要素のフッターの後ろにスクロールすると、スクロールバーがページの下部に当たると見られていません。

<div style="height: 500px; width: 50%; background-color: yellow;"></div> 
<div style="height: 500px; width: 50%; background-color: blue;"></div> 
<div style="height: 500px; width: 50%; background-color: green;"></div> 

<div style="position: fixed; width: 100%; height: 250px; bottom: 0; background-color: #ccc;"> 
    Fixed Footer 
</div> 

Answer 1

最後のDIVに250ピクセルの余白下を追加し、しかし、あなたはCSSを記述する必要があり、あなたの代わりに個別にCSSを記述する場合は良いでしょうdivにスタイルプロパティを与える我々は を非表示にするために、オーバーフローを設定する必要があなたの問題を解決するために

は、これらのプロパティhere.

body, 
 
html{ 
 
    overflow: hidden; 
 
    margin: 0; 
 
    padding: 0; 
 
    }

<div style="height: 500px; width: 50%; background-color: yellow;"></div> 
 
<div style="height: 500px; width: 50%; background-color: blue;"></div> 
 
<div style="height: 500px; width: 50%; background-color: green;"></div> 
 

 
<div style="position: fixed; width: 100%; height: 250px; bottom: 0; background-color: #ccc;"> 
 
    Fixed Footer 
 
</div>

Answer 2

これは、あなたが行う必要がありますものです

<div style="height: 500px; width: 50%; background-color: green; margin-bottom:250px;"> 
</div>