- ベストアンサー
CSSでdivの縦幅を指定する方法
CSSで、div領域の縦幅を指定する方法を教えてください。 下記のような感じのHTMLで、Aが外枠、中のBとCがfloatを使って横並びになっています。 B、C共に、縦のサイズをAの縦幅いっぱいまで（内容の高さに拘わらず常に）広げる方法がわかりません。 （ブログのテンプレート用なので、内容は一定ではありません） height:100%としてみましたが無理でした。 <div id="A"> <div id="B"> メニュー </div> <div id="C"> 本文 </div> </div> よろしくお願いいたします。
- Marylou70s
- お礼率100% (3/3)
- HTML
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
xhtml なら，親要素のサイズも指定しないとだめです． つまり，この場合は， html, body のサイズも指定しましょう．
その他の回答 (2)
heightを%指定する場合は参考URLのサイトが役に立つと思います。
お礼
ありがとうございます。 html, bodyを100%に指定すると表示されました。 ただ、No.1のコメントで書かせて頂いたのですが実は他にヘッダ部分のブロックがあり、 結局100%では希望通りの表示にできないようですので、 質問を終了させて頂きます。ありがとうございました。
- yambejp
- ベストアンサー率51% (3827/7415)
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-transitional.dtd"> の宣言をやめると縦幅いっぱいに表示されました。 これはブログのデフォルトのテンプレートにあったそのままなのですが、 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>
お礼
ありがとうございます。 html, bodyを100%に指定することで表示できました。 すべての親要素にサイズ指定が必要であるということを初めて知りました。 下の方へのコメントにも書かせて頂いたのですが、 実は他にヘッダ部分のブロックがあり、希望通りの表示にできないようですので、 質問は終了させて頂きます。ありがとうございました。