ヘッダーとフッター間の高さdivを100％に設定

Question

ヘッダー/フッター（100％幅、145px高さ）、ヘッダー/フッター間の「メインエリア」（100％幅、動的高さ）、コンテンツの周りにユニークな背景色（860ピクセル幅、動的な高さですが、常にフッターに対して「フラッシュ」）のコンテナがあります。

（See Example for a visual）

私が午前問題は、私は「コンテンツコンテナの最小限のコンテンツがあるときは、常にフッターと同じ高さを持っているように見えることはできませんです。 （original example）のような設定を使用すると、満足できる/ '通常の'量のコンテンツがある場合、またはウィンドウのサイズが変更された場合、フッターがコンテンツ上に浮かんで表示されます。

次のCSSは、コンテンツとフッターの間にギャップを生じます。また、存在する場合に、適切にサイズを変更するには、ダイナミックでありながら、私は、コンテンツが最小であるとき、コンテンツコンテナは、画面のフル高さにし、ページの下部にフッター「スティック」を持つことができますどのように

html,body{ 
    margin:0; 
    padding:0; 
    height:100%; 
    background:yellow; 
} 

.wrap{ 
    min-height:100%; 
    position:relative; 
} 

header{ 
    background:blue; 
    padding:10px; 
} 

#content{ 
    height:100%; 
    width: 400px; 
    margin:0 auto; 
    background:orange; 
    padding:30px; 
} 
footer{ 
    background:blue; 
    position:absolute; 
    bottom:0; 
    width:100%; 
    height:60px; 
} 

通常のコンテンツ量（フッターは常にコンテンツの一番下にあります）？

ありがとうございました！フッターに固定された：

Answer 1

私はあなたの位置を必要だと思う

footer { 
    width: 100%; 
    height: 30px; 
    position:fixed; 
    bottom:0; 
} 

Answer 2

FIDDLE：http://jsfiddle.net/3R6TZ/2/

フィドル出力：http://fiddle.jshell.net/3R6TZ/2/show/

CSS

html, body { 
    height: 100%; 
    margin:0; 
} 
body { 
    background:yellow; 
} 
#wrapper { 
    position: relative; 
    min-height: 100%; 
    vertical-align:bottom; 
    margin:0 auto; 
    height:100%; 
} 
#header { 
    width: 100%; 
    height: 150px; 
    background:blue; 
    position:absolute; 
    left:0; 
    top:0; 
} 
#content { 
    background:pink; 
    width:400px; 
    margin:0 auto -30px; 
    min-height:100%; 
    height:auto !important; 
    height:100%; 
} 
#content-spacer-top { 
    height:150px; 
} 
#content-spacer-bottom { 
    height:30px; 
} 
#divFooter { 
    width:100%; 
    height: 30px; 
    background:blue; 
} 

HTML

<div id="wrapper"> 
    <div id="header">Header</div> 
    <div id="content"> 
     <div id="content-spacer-top"></div> 
     <div id="content-inner"> 
      **Content Goes Here** 
     </div> 
     <div id="content-spacer-bottom"></div> 
    </div> 
    <div id="divFooter">Footer</div> 
</div> 

UPDATE

#content-spacer-topと#content-spacer-bottom問題を引き起こして、100％の高さを超えてボックスのサイズを増加させるパディングやマージンを使用せずに、#content divのパッドに使用されています。

CSS3には、この問題を修正できるプロパティ（more info here）がありますが、CSS3の機能に依存したくないと仮定しています。 http://jsfiddle.net/gBr58/1/

：

EDIT

は:beforeと:after擬似要素の代わりにスペーサーdivを使用

UPDATE 2

代替方法を修正を加え、IE7

まで試験しました

IE7または6で動作しませんハフは、およびIE8で動作するように、<!DOCTYPE>は（w3schools.comに応じて）宣言する必要がありますが、HTMLは

がダウンして動作するように更新

UPDATE 3（非常に多くの更新のために申し訳ありませんが）きれいですIE6に私の会社はIE6をサポートしていないので、通常は気にしませんが、簡単に修正できました。