バックグラウンドの固定要素

Question

私は上記のdiv要素の背後に現れるフッタを作成しようとしています。

An example is the Pitchfork website with the footer on the bottom.

私はCSSでこれを実行しようとしました：

#footer { 
    overflow: hidden; 
} 
#footer .text { 
    position: fixed; 
} 

または私はそれを固定にすると、ウェブサイトの全体の高さを設定することで、ページの下部に移動できます。しかし、それはちょうど複雑です。

これを行う方法については、任意のアイデアや簡単なチュートリアルはありますか？

Answer 1

これを試してみてください：

#footer { 
    position:fixed; 
    left:0px; 
    bottom:0px; 
    height:30px; 
    width:100%; 
    background:#999; 
} 

/* IE 6 */ 
* html #footer { 
    position:absolute; 
    top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px'); 
} 

Answer 2

はフッターに、このCSSを割り当てる：

footer { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    z-index: -1; 
    height: 150px; /* vaue as needed */ 
} 

これは、左下にそれを修正し、他の要素（Zインデックス-1）の後ろにそれを置く

また、ドキュメントフローの最後の要素にフッターの高さとしてmargin-bottomを追加する必要があります。これにより、コンテンツはフッターの上にスクロールできます150px