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

CSS得意な方お助けください。

3ペインのCSSで左右のブロックは短くなっちゃいます。
参考に↓こんなかんじ。
http://wannabe.sweet-smile.org/attic/3pane.html
これどうにかなりませんでしょうか。
理想はヘッダーフッターの間のコンテンツ部分が同じ高さになってほしいのです。

http://flat-design.bz/wp/wp-content/uploads/2008/09/france.jpg

●質問者: きあ
●カテゴリ:ウェブ制作
✍キーワード:CSS なっちゃ コンテンツ ブロック 理想
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● y-kawaz
●100ポイント

修正してみました。

http://www.kawaz.jp/tmp/tmp/3pane.html

修正点は #left,#center,#right を div#content で囲って、以下のCSSを設定しただけです。

#content { overflow:hidden; /* →これは高さを揃えるのには不要→ */ background:#333; color:white; }
#left,#center,#right { padding-bottom:32768px; margin-bottom:-32768px;}

#contentのポイントはoverflowだけです。

仕組みとしては、#left,#center,#right の下側paddingを巨大にしてそれと同じ分マイナスmarginすると下に長い帯のようなDIVが3つ並ぶことになり、はみ出た分をコンテナのdiv#contentのoverflow:hiddenして無かったことにすることで高さを揃えるというものです。

マイナスのマージンは少し気持ち悪く感じるかも知れませんが、この手法は比較的シンプルに高さが揃えられるので結構便利です。


ところで、#content でbackgroundとcolorも指定してありますが、これは素の div の背景色が白に矯正されてしまっているので同じ見た目になるよう仕方無しにとりあえず設定したものです。

divはただの入れ物として使うことが多いので、素のdivにスタイルを設定すると問題の元になるのでするべきじゃないです。

白背景のdivが欲しければクラスを定義して白くしたいdivに設定した方が良いでしょう。

◎質問者からの返答

な?るほど。でかいもの作った後にトリミングするようなイメージですね。

32768pxってすごく中途半端な数字ですが、何か根拠があるんでしょうか。

この数字じゃダメなんですかね。試してみます。


2 ● kaz
●100ポイント

CSS 2 での高さを揃えた段組みは永遠のテーマです。

(というのはさすがに大げさですが、それくらい面倒です)


単純な背景色での色分けで良ければ、

色をつけたカラムを次々にずらしていく以下のパターンが簡単です。


日本語での簡単な解説サイト

[CSS]クロスブラウザ対応、高さの異なるカラムを揃えるスタイルシート | コリス

http://coliss.com/articles/build-websites/operation/css/1591.htm...


上記ページで解説されている元サイト

http://matthewjamestaylor.com/blog/equal-height-columns-cross-br...


英語はちょっと....という場合はデモページの HTML / CSS を見ると良いかもしれません

http://matthewjamestaylor.com/blog/equal-height-columns-3-column...



背景色による単純な塗り分けでなく、画像の枠にかこまれたデザインにする場合、

それぞれの div に蓋や底を追加したり、背景画像を工夫する必要があります。

◎質問者からの返答

そうなんですよ。 "国"って感じに箱作りたいんですよね。

テーブルならできるけどCSSでやろうと思ったら…むう。

ちょっといじってみたいと思います。

関連質問


●質問をもっと探す●



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