- ベストアンサー
divのheightを最大幅で指定するには
ＨＴＭＬ <div id="main"> <div id="sub"> </div> </div> ＣＳＳ div#main{ width="100" height="100" } div#sub{ width=auto height=??? } mainのheightを変えても、subのheightが それに追従するようにしたいのですが、 autoや100%でもうまく行きません。 どうすればいいのでしょうか？
- papamama18
- お礼率90% (119/131)
- HTML
- 回答数2
- ありがとう数3
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
まず、cssで数値を指定するときは単位が必須です。パーセントなのかピクセルなのかポイントなのかetc…。 高さをパーセントで指定する場合は、親要素の高さに対してのパーセントになります。 だから親要素の高さが指定してないと意味がありません。 <html> <body> <div id="main"> <div id="sub"> </div> </div> </body> </html> この場合、subの親要素であるmainに高さの指定が必要ですが、mainの高さもパーセントだとすると、さらに上のbody要素にも高さを指定する必要があります。 さらにbody要素もパーセント指定の場合はhtml要素にも指定します。 html, body, div#main, div#sub{ height:100%; } 親要素の高さが固定されている場合は、そこまでいく必要はありません。 div#main{ height:500px; } div#sub{ height:100%; }
その他の回答 (1)
- gura_
- ベストアンサー率44% (749/1683)
HTML と、スタイルシートの記述が混乱していませんか。↓ <html><head> <style type="text/css"> <!-- div#main{ width:300px; height:100px; background-color:#ccffcc; } div#sub{ width:auto; height:100%; background-color: #ccccff; } --> </style> </head> <body> <div id="main"> ここはメインです <div id="sub"> ここはサブです<br> mainのheightを変えると、<br> subのheightがそれに追従します。 </div> ここもメインです </div> </body> </html>
お礼
丁寧な記述ありがとうございます。 質問では、<html>から記述せずに、要点だけをＨＴＭＬとＣＳＳとに分けて記述しました。 しかし、今見ると…ＣＳＳの記述が間違ってますね… すいません。慌てて打ったんで。 #subのheightを100%とすることで可能なのでしょうか？ 何度か試したのですが追従しませんでした。 もう一度試してみます。
お礼
なるほど！よく分かりました。 ありがとうございます。