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


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

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

回答の条件
  • 1人2回まで
  • 13歳以上
  • 登録:2010/02/24 00:37:04
  • 終了:2010/02/24 11:43:47

回答(2件)

id:y-kawaz No.1

y-kawaz回答回数1420ベストアンサー獲得回数2252010/02/24 01:17:05

ポイント100pt

修正してみました。

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に設定した方が良いでしょう。

id:kia_44

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

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

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

2010/02/24 11:21:18
id:kaz No.2

kaz回答回数200ベストアンサー獲得回数422010/02/24 04:35:28

ポイント100pt

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 に蓋や底を追加したり、背景画像を工夫する必要があります。

id:kia_44

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

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

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

2010/02/24 11:43:09
  • id:kaz
    y-kawaz さんの回答にコメントする形になってしまい恐縮ですが、
    y-kawaz さんの紹介された手法はアンカー(ページ内リンク)を作成した際に、
    ページの中身がネガティブマージンに隠れてしまうという致命的な弱点があります。
    http://d.hatena.ne.jp/shuji_w6e/20090602/1243899997

    この手法を利用した場合、アンカーは使用できませんのでご注意ください。
  • id:y-kawaz
    ネガティブマージンでそろえる手法にそんな問題があったことを初めて知りました。
    情報ありがとうございます>kazさん
  • id:y-kawaz
    >32768pxってすごく中途半端な数字ですが、何か根拠があるんでしょうか。
    32768は単に2バイトで表現できる符号付き整数の最大値です。2の15乗です。
    別にこの値である必要はなく、十分大きい数値なら9999でもなんでもよいです。

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

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

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

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