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

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

●質問者: taroemon
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:CSS サイト スタイルシート デザイン 管理
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● cyndy
●35ポイント

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

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

と思います。

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

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

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

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

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

◎質問者からの返答

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


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

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


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


2 ● pntswrks
●35ポイント

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

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


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

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


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

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


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


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


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

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


オススメですよ。


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

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

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

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

◎質問者からの返答

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


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

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


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

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

関連質問


●質問をもっと探す●



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