こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

CSSのpositionでフッターが最下に配置されてくれない

CSSの配置がどうにもうまくいきません。
フッターをWebページの最下に配置したいのですが、どうしてもWindowsIE7だと中央くらいの場所にきてしまいます。どうやったら治りますでしょうか?
WindowsのIE6やFirefoxではOKなんですが・・・・・

以下、ソースです。
●CSS
------------------------------------------------------
div#hdr-wrap {
position:absolute;
background:url(../img/cmn/hdr_bg.gif) repeat-x;
top:0px;
width:100%;
height:120px;
text-align:center;
}

div#hdr {
width:900px;
_width: 902px;/*IE対策*/
height:120px;
margin-left: auto;
margin-right: auto;
text-align: left;
}

div#hdr-vi{
padding-top:71px;
padding-left:0px;
}

div#gbnavi-wrap {
position: absolute;
background:url(../img/cmn/gbnv_bg.gif) repeat-x;
top: 120px;
width:100%;
height: 51px;
text-align:center;
}

div#gbnavi {
width: 900px;
_width: 902px;/*IE対策*/
top: 120px;
height: 51px;
margin-left: auto;
margin-right: auto;
text-align: left;
}

div#main-wrap{
position: absolute;
top:171px;
width:100%;
height:100%;
background: url(../img/cmn/bg_cts_sdw.gif) repeat-x;
text-align:center;
}

div#main{
position: static;
padding-top:0px;
width: 900px;
_width: 902px;/*IE対策*/
height:100%;
margin-left: auto;
margin-right: auto;
text-align: left;
}


div#ftr-wrap {
clear: both;
background:url(../img/cmn/ftr_bg.gif) repeat-x;
width:100%;
height:151px;
text-align:center;
}

div#footer{
clear: both;
color: #415880;
width: 900px;
_width: 902px;/*IE対策*/
height:151px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
------------------------------------------------------


●以下、HTMLソースです
------------------------------------------------------
<div id="hdr-wrap">
<div id="hdr">
<div id="hdr-vi">コンテンツ入る</div>
</div>
</div>
<div id="gbnavi-wrap">
<div id="gbnavi">
<ul>
<li>コンテンツ入る</li>
</ul>
</div>
</div>
<div id="main-wrap">
<div id="main">
<!--RIGHT AREA-->
<div id="right">コンテンツ入る</div>
<!--/RIGHT AREA-->
<!--LEFT AREA-->
    コンテンツ入る。サイドバーが。
<!--/LEFT AREA-->
<!--/MAIN AREA-->
<!--/MIDDLE AREA-->
</div>
<!--FOOTER AREA-->
<div id="ftr-wrap">コンテンツ入る</div>
<!--/FOOTER AREA-->
</div>
------------------------------------------------------

なぜかIE7だけ、ftr-wrapというフッターエリアの一番外側のDIVから中身が全部画面の中央あたりにあたかもレイヤーで上にのっているがごとく、ミドルエリアのコンテンツの上に乗っかるかたちで配置されてしまいます。
宜しくお願いいたします。

投稿日時 - 2009-02-23 00:04:37

QNo.4741059

困ってます

このQ&Aは役に立ちましたか?

4人が「このQ&Aが役に立った」と投票しています

回答(1)

ANo.1

私IE7で
これだけのソースをHTML化してみたけど
いろいろデザイン上改善点はありそうだけど
<div id="ftr-wrap">コンテンツ入る</div>
は一番下に表示されたわよ。

> ミドルエリアのコンテンツの上
ここに載せていない
もっと別のとこに問題あるんじゃない?

投稿日時 - 2009-02-23 00:20:56

お礼

ありがとうございます。
解決しました!
SEO優位性の絡みでpositionを色々といじっていたことが原因でした。

投稿日時 - 2009-02-23 00:31:21

あなたにオススメの質問