スティッキーフッタを作る方法

Question

スティッキーフッタを作る方法私はgoogleでいくつかの結果を見つけましたが、正確にこれがここで働いている方法を得ていませんでした。私は物事を深く理解するために、 divの#header,＃コンテナ,#footer。

したがって、＃containerをフッターよりも恒久的な場所に置いてはいけません。

簡単な方法を誰もが簡単に理解できると

が私のバイオリンを参照してください...説明： - あなたが望むように位置があるhttp://jsfiddle.net/dZDUR/5/

Answer 1

与える高さ：100％からhtml, body & main containerです。 height:100%を.containerにすると、footer &が返されます。footermarginは、heightと同じです。

html,body{ 
    height:100%; 
} 
.header { 
background:red; 
width:500px; 
height:100px; 
} 

.container { 
background:yellow; 
width:500px; 
height:100%; 
} 

.footer { 
background:green; 
width:500px; 
height:100px; 
    margin-top:-100px; 
} 

HTML

<div class="container"> 
    <div class="header"> 
</div> 
</div> 

<div class="footer"> 
</div> 

チェックこのhttp://jsfiddle.net/dZDUR/8/

Answer 2

http://jsfiddle.net/dZDUR/6/はフッターにposition: fixed値を与え、あなたはできます。この例ではtop：200px; #containerがなくてもそこにとどまるでしょう

Answer 3

CSS経由で絶対位置を指定できます。私はあなたのフッタとヘッダが容器に入れ子になっていないと仮定しています。だから、あなたがこのような構造を持っていると仮定：

<div class="header"></div> 
<div class="container"></div> 
<div class="footer"></div> 

はフッターのdivが上下セットで0に、（流れからそれを取って）配置され、絶対にする必要があり - 例えば：

body { 
    position:relative; 
} 

.footer { 
    position: absolute; /* or position:fixed for scrolling */ 
    bottom: 0; 
} 

あなたは可能体の相対的な位置を設定する必要はないかもしれません（このデフォルトの動作は？）。私は、これはあなたを助けるだろうと思い、絶対（そうでない場合は、同じコード）

Answer 4

：代わりに、位置の固定：QQpingが言及よう

絵でそこにスクロールしている場合は、位置を使用します。

http://jsfiddle.net/4VEqh/

あなたは、コンテナのdivを削除しても、フッターが移動しません。