- 締切済み
スタイルシートのpositionでフッターを位置指定するには
こんにちは。今回ページレイアウトにテーブルではなくcssのpositionを使おうと思っているのですが、フッターの指定がうまくいきません。フッターの上のメインコンテンツや右カラム、左カラムが短い場合は問題ないのですが、長くなるとフッターにかかってしまいます。左カラム、メインコンテンツ、右カラムのどれが長くなっても常にフッターがページの最下部に下がるようにするにはどのように指定すればいいですか?ちなみに今こんな感じで指定しています。 フッターをbottom:0px;で指定すれば常に一番下に来ると思ったのですが…。スクロールしない範囲での一番下にしか来ません…。 /* 左カラム */ #left_column { position: absolute; top: 130px; left: 10px; background-color: #FFFFFF; width: 150px; /* height: 500px; */ border: 1px solid #000; padding: 0px; } /* メインコンテンツ */ #main_contents { position: absolute; top: 130px; left: 165px; background-color: #FFFFCC; width: 490px; /* height: 500px; */ border: 1px solid #000; padding: 10px; } /* 右カラム */ #right_column { position: absolute; top: 130px; left: 660px; background-color: #FFFFFF; width: 200px; /* height: 500px; */ border: 1px solid #000; padding: 10px; } /* フッター */ #footer { position: absolute; bottom: 0px; left: 10px; background-color: #EEE; width: 850px; border: 1px solid #000; padding: 20px; }
- みんなの回答 (4)
- 専門家の回答
みんなの回答
s_husky です。#2を、補足しておきます。 最下部を固定し上と重ならないページはフレームでしか実現した経験がありません。お力になれなくてすみません。
今朝、あなたのスタイルシートを再現して意味が判りました。 例えば、ウインドウを小さくすると、フッターとその他が重なってしまいますね。これは、絶対配置する限り避けられませんね!
s_husky です。 すみません! 相対配置ということを伝えたかっただけです。なのに、私が採用しているスタイルを例示したのが誤解を与えたようですね!XHTML準拠とHTML準拠の差で表示されなかったものと思います。 明日、あなたのやり方で再現した全てを示します。
左右のカラムとメインの中で一番長いのがAとします。Aが500PXであれば500PX+α、Aが1000PXであれば1000PX+αにフッターを配置すればOKです。ということは、相対配置ですね! div#footer { clear: both; width: 820px; margin-left: auto; margin-right: auto; } こんな感じで私は配置していますが...
補足
ご返信ありがとうございます。 早速やってみたのですが、フッターが表示されなくなりました。いろいろ試してみましたが、やっぱりうまくいきません。左右カラムやコンテンツ部分のCSSも修正の必要があるのでしょうか…?