※ ChatGPTを利用し、要約された質問です（原文：レイアウトが崩れます）
レイアウト崩れ！HTMLのソースでメニュー・コンテンツ・サブメニューの高さを保つ方法は？
このQ&Aのポイント
コンテンツ部分が長くてもメニューとサブメニューの高さを自動に設定させる方法を教えてください。
HTMLのソースとCSSを使用して、メニューとサブメニューの高さをコンテンツの長さに合わせる方法を教えてください。
ソースコードのCSS設定を調整して、コンテンツの長さに合わせてメニューとサブメニューの高さを自動的に設定する方法をお教えください。
汚いソースで失礼します。
メニューとコンテンツとサブメニューがありますが
この３つの高さを保つにはどうしたらいんでしょうか？
コンテンツ部分の高さが長いと メニューとサブメニューの高さは短いままで ダサい感じなんです。 なんとご説明したらいいのやら（汗
コンテンツ部分が長くてもメニューとサブメニューの高さを自動に設定させるようにするには、どうしたら良いのでしょうか？
ご教授願います
HTMLのソース＋CSSです↓
<html>
<body>
<div class="wrapper">
<div class="header">
ヘッダーになります<br>
</div>
<div class="main">
<div class="menu">
menu<br>
menu<br>
menu<br>
menu<br>
menu<br>
menu<br>
</div>
<div class="contents">
コンテンツになります<br>
コンテンツになります<br>
コンテンツになります<br>
コンテンツになります<br>
</div>
<div class="submenu">
サブメニューはこちらです<br>
サブメニューはこちらです<br>
</div>
</div>
<div class="footer">
フッター<br>
</div>
</div>
</body>
</html>
CSS
.wrapper {
width: 900px;
margin: 0 auto;
line-height: 1.5;
}
/* メイン*/
.main {
width: 900px;
}
/* ヘッダ*/
.header {
width: 900px;
height: 200px;
background-color: #66FFFF;
background:url(img/top2.jpg) ;
}
/* Menu*/
.menu {
width: 150px;
float: left;
background-color: #FFFF99;
}
/*コンテンツの設定*/
.contents {
float: left;
width: 600px;
background-color: white;
}
/*SubMenuの設定*/
.submenu {
float: left;
width: 150px;
height: 300px
background-color: #66FF66;
}
/* 下の設定 */
.footer {
clear: both;
width: 900px;
border-top: 1px dotted gray;
height: 20px;
text-align: center;
font-size:0.7em;
background-color:black;
}
