フッタをページ最下部に固定するcssを作ったんですが、レイアウトの問題で困ってます。

以下が作ったcssとhtmlです。

-- css --
#container {
width: 100%;
position: relative;
height: auto !important;
height: 100%;
min-height: 100%;
}

#main {
width:500px;
padding-bottom:50px;
background-color:#6666FF;
}

#footer {
background: black;
border-top: solid 1px black;
color: white;
position: absolute;
bottom: 0;
width: 500px;
height: 50px;
}


-- html --
<div id="container">
<div id="main">main</div>
<div id="footer">footer</div>
</div>


フッタの位置は最下部にできたのですが、mainとfooterの間に空白ができてしまいます。
mainの高さををなんとかしてfooterまで伸ばしたいのですが、解決方法がありましたらご教授ください。
なお、bodyタグに背景色を指定するというのは無しでお願いします。

回答の条件
  • 1人2回まで
  • 登録:2009/11/01 13:36:41
  • 終了:2009/11/01 22:36:08

ベストアンサー

id:rouge_2008 No.2

rouge_2008回答回数594ベストアンサー獲得回数3512009/11/01 18:22:28

ポイント60pt

フッタをページ最下部に固定するCSSは、どのサイトを参考にしたのでしょうか?

mainをさらにdivで囲んで、そのボックスに背景色を指定するのは駄目でしょうか?

この方法でしたら、bodyに別の背景を指定したい場合でも問題ありません。

詳しくは、次のサイトで公開されている「CSS Sticky Footer」を参考にしてください。

CSS Sticky Footer

※サンプル通りに作成した場合、「#wrap」に背景色を指定します。

次のサイトで構造を簡単に説明しています。

CSSStickyFooterに学ぶCSSでフッターを最下部に固定するテクニック


コメント欄を開けておいて下さるとやり取りし易いです。

id:pxi13773

回答ありがとうございます。

指摘していただいたmainとfooterをdivで囲んで背景色を指定するという方法で、あっさりできました。

助かりました。

解決してみると、なんであんなに悩んでたんだろう…と思ってしまうほど簡単でした。お恥ずかしい。

コメント欄の件、指摘ありがとうございます。

初質問でしたので、気が回りませんでした。

2009/11/01 22:35:03

その他の回答(1件)

id:kn1967 No.1

kn1967回答回数2915ベストアンサー獲得回数3012009/11/01 13:57:13

ポイント10pt

#main { に

height: 100%;

を追加する。

id:pxi13773

素早い回答ありがとうございます!

しかし残念ながら、FirefoxとIE7/8では駄目なようです。

2009/11/01 14:06:18
id:rouge_2008 No.2

rouge_2008回答回数594ベストアンサー獲得回数3512009/11/01 18:22:28ここでベストアンサー

ポイント60pt

フッタをページ最下部に固定するCSSは、どのサイトを参考にしたのでしょうか?

mainをさらにdivで囲んで、そのボックスに背景色を指定するのは駄目でしょうか?

この方法でしたら、bodyに別の背景を指定したい場合でも問題ありません。

詳しくは、次のサイトで公開されている「CSS Sticky Footer」を参考にしてください。

CSS Sticky Footer

※サンプル通りに作成した場合、「#wrap」に背景色を指定します。

次のサイトで構造を簡単に説明しています。

CSSStickyFooterに学ぶCSSでフッターを最下部に固定するテクニック


コメント欄を開けておいて下さるとやり取りし易いです。

id:pxi13773

回答ありがとうございます。

指摘していただいたmainとfooterをdivで囲んで背景色を指定するという方法で、あっさりできました。

助かりました。

解決してみると、なんであんなに悩んでたんだろう…と思ってしまうほど簡単でした。お恥ずかしい。

コメント欄の件、指摘ありがとうございます。

初質問でしたので、気が回りませんでした。

2009/11/01 22:35:03

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません