ページが絶対配置で作成されているときにフッターを一番下に取得

Question

私は、そのセクションが完全に配置されたdivで構成されているページを持っています。

ページにフッターを作成しようとするまでうまくいったのです。

私の問題は、ボトムプロパティがページではなく画面の下部に固定されるため、ボトムプロパティを使用してフッターを配置できないということです。したがって、ページのコンテンツが画面よりも長い場合は、フッターがコンテンツの下に表示されます。

要素の流れがないので、フッターを要素の流れの底に置くことはできません。すべてのdivが絶対的に配置されているので、静的であるか相対的に配置されているものを置くと、ヘッダーの下のページの一番上に移動します。

これらの固定フッターは、フッタをページの下部に配置する要素の流れに依存するため、動作しません。ここで

はjsbinです：http://jsbin.com/oxefev/edit#javascript,html

bottom CSSプロパティではなく、画面のページの一番下に行くようにする方法があった場合、この問題が解決することが非常に簡単だろう。

編集：私はちょうどそれは、静的位置決めさせるとmargin-top:1000px;に設定することで、ページの下部にそれを強制的にmargin-topプロパティを使用しますが、私はすべての時間は、私が追加またはからコンテンツを削除することを変更しなければならない可能性がありページ。

Answer 1

私の最初のお勧めは次のようなものです：すべてを絶対に配置しないでください。それは何の恩恵ですか？

しかし、あなたはjavascriptの柔らかいアプリケーションで求めているものを達成することができます。以下のような何か：

document.getElementById('footer').style.top = document.getElementById('content-wrapper').clientHeight + 150 + 'px'; 

EDIT：これも動作しているようですし、あなたのヘッダーの高さを調整する場合は変更を必要としません（+/-ボックスモデルに基づいて、いくつかのピクセル）を

：

document.getElementById('footer').style.top = document.body.clientHeight + document.getElementById('footer').clientHeight + 'px'; 

Answer 2

jQuery（document）.height（）は、正確で一貫したブラウザ間の結果を返します。コンテンツの配置の高さを知ったら、フッターを簡単にする必要があります。