IEとFirefoxで動作するCSSフッター

Question

こんにちは、私はCSSのフッターを追加しようとしていますが、正しく動作させることはできません。今のところ私はそれを狂ったように微調整しています。もしFirefoxがうまくいけばInternet Explorer 7でうんざりしてしまいますが、時々途中で途切れることはありません。（CSSベースのフッタのための良い例がありますか？）

は、様々な高さの2列、私のページには、一定の幅を持っていることを考慮し、私のフッターが100％の幅を有する

---

であるだけでなく、私は、CSSにスティッキーフッターを使用しています - 。それがで正常に動作するようです私は、ブラウザのビューポートの高さの下にフッタがぶら下がっていることに気付きました。IEの高さを100％と解釈していると思います。自分では大丈夫ですが、私の修正と追加はIEでうんざりしてしまいます。フッターやヘッダーのための基本的なコードはほどです：

@charset "utf-8"; 
/* CSS Document */ 

html, body, #wrap {height: 100%;} 
body > #wrap > #main > #pageContent {height: auto !important; min-height: 100%;} 

#main 
{ 
    background-color:#FFFFFF; 
    width:960px; 
    height:100% !important; 
    text-align:left; 
    position:relative; 
} 

#footer 
{ 
    display:block; 
    width:100%; 
    text-align:center; 
    position: relative; 
    height: 150px; 
    clear:both; 

} 
/* CLEAR FIX*/ 
.clearfix:after 
{ 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 
.clearfix 
{ 
    display: inline-block; 
} 
/* Hides from IE-mac \*/ 
* html .clearfix { 
    height: 1%; 
} 
.clearfix 
{ 
    display: block; 
} 
/* End hide from IE-mac */ 

そしてHTMLが多少私はCSS Sticky Footerを試してみた

Answer 1

何らかの理由で2つの明確なインスタンスがありました。どちらも問題は発生していますが、冗長なエントリを削除しても表示されません。意味があるようです。とにかくみんなありがとう。

Answer 2

それをめちゃくちゃにしています。この

<div id="wrap"> 
<div> header is here</div> 
<div id="main" class="clearfix">content is here </div> 
</div> 
<div id="footer"></div> 

のようなものです。

Answer 3

コードを見ることなく言うことはできませんが、2列のレイアウトでは、おそらく少なくとも1つの列が浮動しています。フッタにstyle = "clear：both"を配置すると、ページの下に強制的に配置されます。

Answer 4

これは達成しようとしていることによって異なります。複数あると仮定、

#footer {clear: both; 
     } 

この意志、少なくとも、列の最長の下にフッターをプッシュ：私は最初の提案は使用することです。

第二の提案、そして私の推奨されるソリューション（私はクロスブラウザ/ OSの互換性についてはよく分からない念頭に置いてベアリング）は、次のとおりです。

#footer {position: absolute; 
     bottom: 0; 
     left: 0; 
     right: 0; 
     } 

これはかなり自明ですが、基本的にアタッチフッタをページ下部に表示し、内容に応じて#footerを調整することもできます。つまり、#footerは100％幅（ピクセルの付与または取得）になるため、デザインに合わせて調整します。