divを使ってデザインしているのですが、
全体のデザインの入る#wrapの中に
floatを左に設定した#leftと、
floatを右に設定した#rightがあります。
#leftにはメニューバーを、#rightにはコンテンツを入れるのですが、
コンテンツの量はページによって全然違うので、
#leftの長さを設定できません…。
#leftには背景色がついているので、途中でとぎれない様にしたいです。
短く設定すると、下が切れますし、
長く設定すると、情報量が無いページでは、ただ縦に長いだけの空白になってしまいます。
min-heightというのがあるらしいのですが、なぜか反映されなくて…
#rightの長さに合わせて、#leftを自動で伸び縮みさせたいのですが…
可能でしょうか?
質問の仕方が下手だったらゴメンなさい!
誰か助けてください…。よろしくお願いします
No.1ベストアンサー
- 回答日時:
いまいちイメージが沸かなくて
再現できないんだけど
#leftと#rightをheight:100%じゃダメかしら。
そうすれば両方とも高さが#wrapの高さになるわ。
ひとつの参考意見として。
すごく早いアドバイスありがとうございます!
それが、#wrapも横幅のみ設定していて
縦はアクティブに変わるようになってるんです…
#wrapの中にヘッダーを入れて、
左に#leftのメニューバーを入れて
右に#フラッシュと、#right(その中も縦に2分割…)
ごちゃごちゃすぎて100%にしても上手くいきませんでした…。
#wrapの縦の最短の長さが設定できたなら、
#leftのみ100%にしたらなんとかなりそうなんですが…
#wrapの長さを設定した時はこれ凄く最適ですね!
とてもためになりました、本当にありがとうございます!
No.2
- 回答日時:
> min-heightというのがあるらしいのですが、なぜか反映されなくて…
IE6とかでご覧になってますか?
IEだと7より前のヴァージョンではmin-heightプロパティが実装されていません。Firefox等他のモダン・ブラウザでは正しく効きます。
ちなみに、IE6だとheightプロパティを指定しているとmin-heightプロパティと同様の動作(ボックスの実際の内容量がその高さを超えてもはみ出さず勝手に伸びてくれる。heightプロパティとして本来は正しくない挙動です。)をします。
お悩みの症状は、頻繁に出てくる質問のひとつですね。
> #rightの長さに合わせて、#leftを自動で伸び縮みさせたいのですが…
#rightと#leftには親子関係が生じてないので、一方の長さに合わせて自動的にもう一方を合わせるという考え方ができないのですが、#wrapという共通の親を持つので、#wrapに対しての#rightと#leftの高さの描画領域を常に同じにする、という事であれば可能です。
方法は色々ありますが、下記などは良く使われる手法の一つです。
http://coliss.com/wp-content/uploads/css-columns …
http://coliss.com/articles/build-websites/operat …
あとは、実際の#rightと#leftのボックスの高さは異なったままで、両者の背景画像合わせて一つにして#wrapの背景画像として描画する事で、「見た目だけ揃える」という方法もあります。つまり、#wrapが幅720px、#leftが幅200pxで背景色が青、#leftが幅520pxで背景色が白、であれば左から200pxが青で残りの520pxが白という横幅が720px(縦は適当)の画像を作成し、それを#wrapにbackgroundプロパティで縦方向にのみリピートさせ、#leftと#rightには背景を指定しない、という事です。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- PowerPoint(パワーポイント) ExcelのVBAコードについて教えてください。 3 2022/05/25 14:32
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- PHP アップロード画像数でCSSを分けることに成功したのですが、画像の横に文字を並べることが出来ません。 3 2023/07/28 17:16
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- Visual Basic(VBA) エクセルの数式で教えてください。 1 2023/07/31 15:49
- オープンソース cssで中央寄せ 1 2023/05/19 06:25
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
css初心者 フレックスボックス...
-
widthやheightの数値に単位(px...
-
画像と一緒にスライドするリン...
-
CSS:animation開始位置の設定
-
テキストボックスの高さを可変...
-
インラインフレーム内の表示位...
-
Media Queries 4 で 非推奨とな...
-
CSSのposition値の上書き(打消...
-
<div>と<div>の間の10px程の...
-
【HTML&CSS】フッター下部の余...
-
footer を横幅いっぱいに広げる...
-
余分な縦スクロールバーが出て...
-
4枚の画像を均等間隔で一列に...
-
W3Cのソースコードの検証サービ...
-
CSSがなぜかfont-sizeだけ効か...
-
ddの内容が多い時のdtの背景を...
-
CSSで背景色を下まで表示させたい
-
ライトボックスでスクロールバー
-
【HTML】【CSS】【Swiper】 元...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
form input テキストを上下中央...
-
<div>と<div>の間の10px程の...
-
CSSがなぜかfont-sizeだけ効か...
-
divで囲まれたpaddingの指定を...
-
表示倍率を変えるとレイアウト...
-
画像イメージの上下左右、欲し...
-
CSS、width100%でもできる余白
-
cssで中央寄せ
-
CSS:animation開始位置の設定
-
スクロールボックスを中央に配...
-
CSSで背景画像を一番下にもって...
-
【CSS】ヘッダーの高さが不明の...
-
初心者html・CSS ウィンドウを...
-
footer を横幅いっぱいに広げる...
-
CSSで指定した背景画像にリンク...
-
div領域をウインドウサイズに合...
-
W3Cのソースコードの検証サービ...
おすすめ情報