スクロールしても一番下にdivスティックを作成

Question

スクロールしてもウィンドウの一番下に貼り付けるフッターを実装しています。また、フッターの上にあるコンテンツのスクロールバーは、コンテンツ自体の中にある必要があります（フッターには拡張されません）。

これを行う方法はありますか？ありがとう。

Answer 1

フッター要素の設定CSS：

.footer{ 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
} 

Answer 2

.footer{ 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
} 

ほとんどが正常に動作します

！しかし、スティッキーにしたい場合は、iScroll（http://iscrolljs.com）を使用する必要があります。iScrollではスクロールする領域が1つしかなく、ヘッダーとフッターをスクロールできません。

Answer 3

ページを描画（レイアウト）できるビューポートがあり、その外に描画することはできません。スクロールバーはウィンドウ自体のコントロール/デコレーションであり、カバーすることはできません。

あなたはになります。は、ウィンドウ上にスクロールバーが表示されないようにして、メインコンテンツにスクロールバーが表示されないようにします。

フッタとメインのコンテンツの位置を設定し、メインコンテンツをoverflow: scrollでスクロールできるようにします。スクロールバーはブラウザウィンドウの代わりにコンテンツdivに追加されます。
フッターの横にはスクロールバーがありませんが、右側には予約スペースがあります。それはあなたのコントロールから外れています。これはブラウザのベンダによって異なります。

それは（私はクラスの代わりにIDを使用しています）次のようになります。

#content { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 90%; 
 
    overflow: scroll; 
 
} 
 
#footer { 
 
    background: white; 
 
    position: fixed; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 10%; 
 
}

<div id="content"> 
 
This is the content area. It will have lots of vertical space so that it can scroll.<br> 
 
<br> 
 
a<br><br> 
 
b<br><br> 
 
c<br><br> 
 
d<br><br> 
 
e<br><br> 
 
f<br><br> 
 
g<br><br> 
 
h<br><br> 
 
i<br><br> 
 
j<br><br> 
 
k<br><br> 
 
l<br><br> 
 
m<br><br> 
 
n<br><br> 
 
o<br><br> 
 
p<br><br> 
 
</div> 
 
<div id="footer"> 
 
This is the footer part and may have <em>the fine print</em> and/or navigation links; whatever you like. 
 
</div>

...またはそれを証明this fiddleを参照してください。