※ ChatGPTを利用し、要約された質問です（原文：Divの入れ子とHeight）
Divの入れ子とHeight
このQ&Aのポイント
DivのContainerの中にPosition:Absoluteの３つのDivを入れ子にしたいんですが、Containerの高さを中身のDivの高さに依存する形にしたいのですが、うまくいきません。
Containerの高さと中身のコンテンツの高さをAutoにした場合、中身のほうは内容に依存する形で高さが自動になるんですが、Containerのほうがうまくいきません。FloatをつかわずにPosition:Absoluteでして、Containerを中身の高さに依存、という風にする方法はないのでしょうか？
DivのContainerの中にPosition:Absoluteの３つのDivを入れ子にする方法を教えてください。
こんにちわ。初歩的な質問かもしれませんがお願いします。
DivのContainerの中にPosition:Absoluteの３つのDivを入れ子にしたいんですが、Containerの高さを中身のDivの高さに依存する形にしたいのですが、うまくいきません。
Containerの高さと中身のコンテンツの高さをAutoにした場合、中身のほうは内容に依存する形で高さが自動になるんですが、Containerのほうがうまくいきません。FloatをつかわずにPosition:Absoluteでして、Containerを中身の高さに依存、という風にする方法はないのでしょうか？
こちらがコードです。
HTML CODE
<HTML>
<HEAD>
<link rel="stylesheet" href="hp.css" type="text/css" />
</HEAD>
<BODY>
<div class="container">
<div class="banner">
</div>
<div class="menu">
</div>
<div class="main">
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
</div>
</div>
</BODY>
</HTML>
CSS CODE
* {margin:0;padding: 0;}
div.container{border:2px solid RGB(888888);
position: absolute;
top:20px;
left:50px;
width:900px;
height:auto;}
div.banner { position: absolute;
top:20px;
left:80px;
width:700px;
height:150px;
border:2px solid RGB(888888);}
div.menu{ position: absolute;
top:190px;
left:30px;
width:150px;
height:300px;
font-weight:bold;
border:2px solid RGB(888888);}
div.main{ position:absolute;
top:190px;
left:200px;
width:600px;
height:auto;
border:2px solid RGB(888888);}
お礼
そうでしたか。ありがとうございます。