※ ChatGPTを利用し、要約された質問です（原文：サブメニュー要素を下部に固定したい。）
サブメニュー要素を下部に固定したい
このQ&Aのポイント
メインコンテンツ領域の下部に#submenuを固定する方法についてアドバイスをいただきたいです。
現在はメインコンテンツ領域の下に#submenuを配置し、heightを設定して押し下げていますが、コンテンツごとにheightの高さが変わるため、対処できません。
クロスブラウザで汎用性の高い方法がありますか？ Windows IE6,IE7,Firefox2.x,3.x、Mac Safari,Firefox2.x,3.xに対応している方法をお願いします。
以下のソースを作成しました。
希望する事は、メインコンンテンツ領域の下部に、#submenu を固定したいと思います。
今までは、メインコンテンツ #main 領域の下に配置し、#mainで、height を設定して下に押し下げていましたが、コンテンツ毎に、height の高さが変わる為に、対処しきれなくなりました。
何か良いアイディアが有ればアドバイスを頂きたいと思います。
ネット検索も色々試みましたが、探しきれませんでした。
ちなみに、#submenu を追加すると、ブラウザ一番下まで来てしまいました。
position: absolute;
bottom: 0;
希望として、クロスブラウザ、汎用性の高い方法が有ればと思います。Windows IE6,IE7,FireFox2.x,3.x、Mac safari,FireFox2.x,3.x 等です。
以下にサンプルソースを記載します。
<!-- ソースサンプル -->
<head>
<style type="text/css">
<!--
#wrapper {
margin: 0 auto;
width: 510px;
background-color: #FFA;
border: solid 1px #F00;
}
#side {
float: left;
width: 200px;
background-color: #FFE;
}
#main {
float: right;
width: 300px;
height: 200px;
background-color: #FFC;
}
#submenu {
margin: 0 auto;
padding: 0;
width: 95%;
background-color: #FFF;
}
#submenu ul {
margin: 0;
padding: 0;
}
#submenu li {
margin: 0;
padding: 0;
display: inline;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
-->
</style>
</head>
<html>
<body>
<div id="wrapper" class="clearfix">
<div id="side">
<p>サイドコンテンツ領域</p>
</div>
<div id="main">
<p>メインコンテンツ領域</p>
<!-- 下記要素（サブメニィー）をメインコンテンツ領域の下部に固定したい -->
<div id="submenu">
<ul>
<li>サブメニュー：</li>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</div>
</div>
</body>
</html>
<!-- ソースサンプル -->
お礼
kuzumiHK 様 アドバイスをありがとうございました。 実は、今まで min-height は IE6 では使えないと言う事で、避けていました。 今回のアドバイスで、条件付きコメントの件も教えて頂き、とても助かりました。もっと精進しなければと思います。 実は、アドバイスを頂き質問の意図が間違っていた事に気が付きました。 いったん、この質問は終了させて頂き、再度新規に質問させて頂きます。 ご確認して頂ければ、嬉しく思います。