CSSでdivの縦幅を指定する方法

解決済

質問者：Marylou70s
質問日時：2006/04/10 09:31
回答数：3件

CSSで、div領域の縦幅を指定する方法を教えてください。

下記のような感じのHTMLで、Aが外枠、中のBとCがfloatを使って横並びになっています。
B、C共に、縦のサイズをAの縦幅いっぱいまで（内容の高さに拘わらず常に）広げる方法がわかりません。
（ブログのテンプレート用なので、内容は一定ではありません）
height:100%としてみましたが無理でした。

<div id="A">
　　<div id="B">
　　　　メニュー
　　</div>
　　<div id="C">
　　　　本文
　　</div>
</div>

よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： orc-orca
回答日時：2006/04/12 04:57

xhtml なら，親要素のサイズも指定しないとだめです．

つまり，この場合は， html, body のサイズも指定しましょう．

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
html, bodyを100%に指定することで表示できました。
すべての親要素にサイズ指定が必要であるということを初めて知りました。

下の方へのコメントにも書かせて頂いたのですが、
実は他にヘッダ部分のブロックがあり、希望通りの表示にできないようですので、
質問は終了させて頂きます。ありがとうございました。

通報する

お礼日時：2006/04/12 10:51

No.2

回答者： noname#19206
回答日時：2006/04/10 15:06

heightを%指定する場合は参考URLのサイトが役に立つと思います。

参考URL：http://www.mozilla.gr.jp/standards/webtips/webti …

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
html, bodyを100%に指定すると表示されました。

ただ、No.1のコメントで書かせて頂いたのですが実は他にヘッダ部分のブロックがあり、
結局100%では希望通りの表示にできないようですので、
質問を終了させて頂きます。ありがとうございました。

通報する

お礼日時：2006/04/12 10:49

No.1

回答者： yambejp
回答日時：2006/04/10 09:58

A、B、C全ての高さを100%にしてみてはいかがでしょう？

- 0
- 件

通報する

この回答へのお礼

ありがとうございます。
教えて頂いた設定にしてみましたが、実際のテンプレートではちゃんと表示されず、色々試しておりましたところ、
<!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>