人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

フッタをページ最下部に固定する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タグに背景色を指定するというのは無しでお願いします。

●質問者: pxi13773
●カテゴリ:ウェブ制作
✍キーワード:absolute background background-color BODY border
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● kn1967
●10ポイント

#main { に

height: 100%;

を追加する。

◎質問者からの返答

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

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


2 ● rouge_2008
●60ポイント ベストアンサー

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

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

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

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

CSS Sticky Footer

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

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

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


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

◎質問者からの返答

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

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

助かりました。

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

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ