スタイルシートについて質問です。

CSSを使ってサイト内の全ページのデザインを一括管理しており、
各ページをfloatでleftとrightに分けています。
leftの部分の高さは一定なのですが、rightの部分がページによって、
長くなったり短くなったりしています。
rightの高さが長い時はleftがrightに併せて長くなり、
rightの高さが短い時はrightがleftに併せて同じだけ長くなる方法を教えてください。

回答の条件
  • 1人2回まで
  • 登録:2008/08/09 01:44:16
  • 終了:2008/08/10 22:37:10

回答(2件)

id:cyndy No.1

cyndy回答回数3ベストアンサー獲得回数12008/08/09 01:59:27

ポイント35pt

私も同じように悩むときがありました。

たぶん、LEFTとRight部分の背景が同じところまで来ないので困っているのでは?

と思います。

私は、LEFTとRIGHTの親DIVの背景に、LEFTとRIGHTの背景にしたいものを画像にして、REPEAT-Yで伸びるようにしています。

LEFTとRIGHTのどちらが長くても、結局親DIVの背景画像が伸びるので両方の高さが同じようになります。

LEFTとRIGHTの下でCLEARしておくと、さらに下の部分が同じ高さから始まります。

という風に私はしています。

意味が通じているといいのですが。

id:taroemon

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


>たぶん、LEFTとRight部分の背景が同じところまで来ないので困っているのでは?

そのとおりです。質問の仕方が悪くてすみません。


おっしゃられるとおりに調整してみることにします。

2008/08/10 22:36:08
id:pntswrks No.2

pntswrks回答回数12ベストアンサー獲得回数12008/08/10 17:36:57

ポイント35pt

一番簡単な方法は、javascriptを使って、片方のheightを取得し、もう片方のdivのheightの値を足し引きする事です。

僕の知る限りではCSSではこれを完璧に実現することは不可能です。


javascriptで実現する場合ですが、僕もあまりjsは詳しくないので、ライブラリのheightline.jsを使っています。

これを使えば、javascriptを自分で記述することなく、要素のclassに「heightLine」などを付加してあげれば、


・両方の要素の高さを取得し、height高い方に合わせて両方の要素のheightを揃える

・ブラウザの機能を使って文字サイズの変更を行った場合でも、そのアクションを取得して、リアルタイムでボックスの高さを変更してくれる


といった事が実現できます。


詳しくは、ブロックレベル要素の高さを揃えるheightLine.js【to-R】を参考にして下さい。


jsファイルは上記ページからダウンロードできます。

(確かライセンスはMITライセンスだったと思います)


オススメですよ。


後はCSSで背景画像をうまく使い、擬似的にボックスが揃っているように見せることも可能です。

その場合は、2つの要素を囲っているボックスの背景に、2つのボックス用の背景を敷くことにより、

どちらかのボックスが大きくなっても、背景は常に横に並びます。

でもまぁ、前述のjsの方が確実だとは思います。

id:taroemon

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


>僕の知る限りではCSSではこれを完璧に実現することは不可能です。

こうしたご意見はかえってありがたいです。


実はjavascriptについては全然わかりません。

背景の画像を試してみることにします。

2008/08/10 22:33:58

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

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

トラックバック

  • スタイルシートのfloat 楽しい生活 2008-09-11 12:49:13
    スタイルシートについて質問です 私が思うに、スタイルシートって「float」の使い方が一番難しいです。 テーブルレイアウトからCSSによる段組へ移行する場合、避けては通れないのが、こ
「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

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

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