CSSの高さ100％の問題

Question

CSSの100％の高さの問題について多くの質問があります。 しかし私はそこにある指示に従おうとしましたが、高さはまだ100％ではありません。 だから私は再度質問したいと思っていました。

あなたは問題がある見ることができるサイト：

www.exendo.be

いくつかのCSSスタイル：

html { 
    height: auto !important; 
    margin: 0; 
    min-height: 100%; 
    padding: 0; 
} 

body { 
    background: url("/wp-content/uploads/2011/06/bg.png") repeat-x scroll 0 100px #F2F7E8; 
    height: auto !important; 
    margin: 0; 
    min-height: 100%; 
    padding: 0; 
    width: 100%; 
} 

wrapper { 
    height: auto !important; 
    min-height: 100%; 
    position: relative; 
} 
footer-container { 
    background: url("/wp-content/uploads/2011/06/exendo-footer_bg.png") no-repeat scroll center bottom #557F40; 
    height:146px; 
} 

あなたがサイト上で見ることができるように、フッタはページ上の高すぎます。 Firebugでページを調べると、HTMLは100％の高さですが、bodyタグは認識されません。 問題は両方ともFirefoxとIEで発生します。

誰かがそれが偉大になるのを助けることができたら！

Answer 1

私はこれだと思います。articleお手数ですが、この記事によると

：

割り当て「の位置：相対」あなたの「コンテナ」のdivには - ページ、ページの容器、またはラッパー（私は3の一つがにわからないんだけど、ちょうど試してください） 、次に "position：absolute; bottom：0;"あなたの "フッタコンテナ" divに移動します。

私はあなたに役立つことを願っています。

Answer 2

@denappel; html & body 100% heightをmain div wrapper &の外側に置き、minusにフッターの高さに応じて余白を付けてください。footerを入力してください。

CSS：

.wrapper { 
    position: relative; 
    width: 700px; 
    font-size: 0.9em; 
    margin: 0 auto -142px; 
    background:yellow; 
} 
.header { 
    height: 190px; 
    background:green; 
} 

.footer { 
    position: relative; 
    width: 700px; 
    margin: 0 auto; 
    background:red; 
} 

* { 
    margin: 0; 
} 
html, body { 
    height: 100%; 
} 
.wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -142px; 
.footer, .push { 
    height: 142px; 
} 

チェックこの例 http://jsfiddle.net/sandeep/tCdPX/3/

この機能呼ばstickyfooter

Answer 3

人々の数は位置示唆

：絶対。下：0;

これは、コンテンツがコンテナよりも大きい場合に問題を引き起こす可能性があります。高さは増加しないので、コンテンツはもはや収まりきらなくなり、切断されたり、醜いスクロールバーになる可能性があります。

コンテナに固定された高さを与えることができれば、高さ：100％が子要素に作用するので、これは理想的です。コンテンツが大きすぎる場合、オーバーフローで子に背景を置くことができます：親に表示されるので、コンテンツは引き続き表示されます。これは役立ちますが、子が親と同じ幅でない限り、それでも破損する可能性があります。

これでうまくいかない場合は、分や高さをem単位またはピクセル単位で使用することをおすすめします。これにより、高さが親を塗りつぶし、内容が長すぎると展開されます。これは、お客様の声がwww.baka.ca