※ ChatGPTを利用し、要約された質問です（原文：borderをページの下まで伸ばしたい）
borderをページの下まで伸ばしたい
このQ&Aのポイント
テーブルを使っている場合、borderをページの下まで伸ばす方法についてご質問です。
現在、左右にレイアウトを分けるためにテーブルを使用していますが、メニュー部分のborderが途切れてしまう問題が発生しています。
どのようにすればメインコンテンツの縦量に合わせて下までborderを伸ばすことができるでしょうか？
お世話になります。既出の質問を見たのですが、解決できず質問させていただきます。
テーブルを使い左右にレイアウトを分けています。
左のメニュー部分の上下両サイドにborderを設定していますが、メニュー部分の方が圧倒的にメインよりコンテンツが少なく、ページの途中でborderが途切れてしまいます。
メインコンテンツの縦量に合わせて下まで伸びて欲しいのですが、どうすればいいのでしょうか？
恐れ入りますが下記ソースです。
/*CSS*/
body {
margin: 0px auto;
padding: 0px;
height:100%;
width: 760px;
text-align:center;
position:relative;
}
#header {
padding:0px ;
margin: 0px auto;
width: 760px;
height: auto;
}
#contents {
margin: 0px auto;
padding: 0px;
height:100%;
width: 760px;
background-color:#FFFFFF
}
.side{/*メニュー部分*/
margin:0px;
padding:0px 0px 20px;
border:1px #666666 solid ;
width:163px;
height:auto;
}
.footer {/*フッターの背景画像サイズに合わせheightを設定*/
margin:0px;
padding:10px;
width: 760px;
height:72px;
text-align:left;
background-image:url(image/bottom.gif);
background-repeat:no-repeat;
border:0px;
}
.coretable{/*画面レイアウト左右分けテーブル*/
margin:5px 0px 0px;
padding:0px;
width:760px;
}
<!--html-->
<body>
<div id="header">
ヘッダー内容
</div>
<div id="contents">
<table border="0" cellpadding="0" cellspacing="0" class="coretable">
<tr><td width="165" align="center" valign="top">
<div class="side">
メニュー内容
</div>
</td>
<td width="595" align="center" valign="top">
メインコンテンツ内容
</td>
</tr>
</table>
</div>
<div id="footer">
フッター内容
</div>
</body>
</html>
あるサイトで拝見して、
.sideに
height:100%;/* for IE6 */
min-height:100%;
を加え、
html{ height:100%; }
body{ height:100%;}
としてみたところ、borderは伸びず、footerがページの途中に上がってきてしまうという現象でした。
テーブルを使っているのが悪いのでしょうか？
どうかお知恵をお貸し下さい。
お礼
grumpy_the_dwarf様 お世話になります。 なんと素早く簡潔なご回答をありがとうございます。 こんなに簡単なことだったなんて…。お恥ずかしい限りでございます。 大変勉強になりました。 本当にありがとうございます。 長文でしたのに読んで下さりありがとうございました。