CSSで、div領域の縦幅を指定する方法を教えてください。
下記のような感じのHTMLで、Aが外枠、中のBとCがfloatを使って横並びになっています。
B、C共に、縦のサイズをAの縦幅いっぱいまで(内容の高さに拘わらず常に)広げる方法がわかりません。
(ブログのテンプレート用なので、内容は一定ではありません)
height:100%としてみましたが無理でした。
<div id="A">
<div id="B">
メニュー
</div>
<div id="C">
本文
</div>
</div>
よろしくお願いいたします。
No.2
- 回答日時:
ありがとうございます。
html, bodyを100%に指定すると表示されました。
ただ、No.1のコメントで書かせて頂いたのですが実は他にヘッダ部分のブロックがあり、
結局100%では希望通りの表示にできないようですので、
質問を終了させて頂きます。ありがとうございました。
No.1
- 回答日時:
A、B、C全ての高さを100%にしてみてはいかがでしょう?
<div id="A" style="height:100%;">
<div id="B" style="height:100%; width:30%;background-color:aqua;float:left" >
メニュー
</div>
<div id="C" style="height:100%;background-color:yellow;" >
本文
</div>
</div>
ありがとうございます。
教えて頂いた設定にしてみましたが、実際のテンプレートではちゃんと表示されず、色々試しておりましたところ、
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
の宣言をやめると縦幅いっぱいに表示されました。
これはブログのデフォルトのテンプレートにあったそのままなのですが、
HTMLでは使えてもXHTMLのページには使えないということがあるのでしょうか…?
それから実は、大変申しわけありません! 最初の質問の例が違っていました。
正しくは、↓のようにヘッダ部分(横100%)があり、その下にメニュー・本文があります。
ヘッダ部分はデザインの都合でheightをpixelで指定する必要があり、
B・Cをheight:100%とすると実際の画面の縦幅より長くなってしまいました。
<div id="A">
<div id="H">
ヘッダ
</div>
<div id="B">
メニュー
</div>
<div id="C">
本文
</div>
</div>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- PHP アップロードファイルの数に応じてCSSを動的に変更したいのですが、方法がわかりません 3 2023/07/23 21:59
- PHP アップロード画像数でCSSを分けることに成功したのですが、画像の横に文字を並べることが出来ません。 3 2023/07/28 17:16
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS 要素の幅をいろんな写真の幅に合わせたい。 1 2022/07/25 20:11
- HTML・CSS (Javascript)印刷するファイルに応じて印刷プレビュー画面で用紙を自動的に切り替えたい!! 2 2022/04/11 12:04
- HTML・CSS imgとpを縦・横に中央揃えする 1 2023/01/17 11:30
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
【CSS】floatで左右に並べた...
-
CSS <div>の入れ子が反映さ...
-
textareaで入力した文字を改行...
-
オンマウス時に別画像を上に重...
-
離れた場所にマウスオーバーで...
-
フッター上部に謎の隙間
-
チェックボックスの背景色って...
-
コンテンツとコンテンツの詰まり
-
大分類・中分類・小分類
-
JQuery UIを使用したドラッグ&...
-
指定した項目を二重線で消す
-
スマートフォンで適切に見られ...
-
プログラミングでのビンゴマシ...
-
【html5】canvasでの文字の形の...
-
メニューバーもスクロールに合...
-
HTML文書のソースに自動的に変...
-
1行で左寄せと右寄せと中央揃え...
-
画像のスムーズなフェードイン方法
-
ホームページのsidebar とconte...
-
MAX関数を使ってからLEFT JOIN...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
フッター上部に謎の隙間
-
【CSS】floatで左右に並べた...
-
CSS <div>の入れ子が反映さ...
-
Ctrl+F(検索)の窓を出したいの...
-
css固定したフッターが本文と重...
-
textareaで入力した文字を改行...
-
オンマウス時に別画像を上に重...
-
文字を固定したいのですが…
-
スクロール可能なチェックボックス
-
divのheight指定で画面一杯に表...
-
Flickity で画像にリンクを貼る...
-
スタイルシートで画面を上下に...
-
1行で左寄せと右寄せと中央揃え...
-
CSS のみのタブ切り替えについて
-
CSS 可変マージン
-
HTMLですCSSです この画像のよ...
-
チェックボックスの背景色って...
-
HTMLですCSSです 画像のように...
-
画像の特定の座標にカーソルが...
-
TABLEの高さを固定したいのですが…
おすすめ情報