CSSを使用したHPの左メニューとフッターについて
CSSを使用したホームページを作成しています。
左メニューとメインコンテンツ部分があります。
2点ほど、ご教授頂けますと幸いです。
1.左メニューの背景色について
現在、左メニューの背景色がメニュー周りのみとなっています。
これを左メニュー最下部（フッターの所まで）色を付けたいと思っています。
2.ブラウザのサイズ縮小によるフッターの表示について
現在、フッターを常に最下部で表示するように対応してみた所です。
ブラウザのサイズを縮小（上下を狭くする）と、フッターの部分が、左メニューの上部に重なってしまいます。
こちらを重ならないようにする方法（重なりそうになるとフッターが画面外に）はどのようにしたら宜しいでしょうか？
以下ソースとなります。
宜しくお願い致します。
HTML
---------------------------------------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" href="test.css" type="text/css" />
<title></title>
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="main">
<div class="category">
<h1>テスト</h1>
<div class="entry_body">
本文本文本文本文本文本文本文本文本文本文本文本文
</div>
</div>
</div>
<div id="side">
<div class="category">
<h3>メニュー</h3>
<ul>
<li><a href="../test1/">test1</a></li>
<li><a href="../test2/">test2</a></li>
<li><a href="../test3/">test3</a></li>
<li><a href="../test4/">test4</a></li>
<li><a href="../test5/">test5</a></li>
</ul>
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
---------------------------------------------------------------
CSS
---------------------------------------------------------------
html, body {
height: 100%;
font-size:80%;
line-height: 140%;
letter-spacing:1px;
color: #333333;
background-color:#cccccc;
text-align: center;
margin: 0px auto;
padding: 0px;
}
a:hover {
text-decoration: none;
}
#container {
width:900px;
min-height:100%;
height:auto !important;
height:100%;
position: relative;
margin: 0px auto;
background-color:#FFFFFF;
text-align: left;
}
#header {
border-top:#003366 solid 10px;
margin: 0px 0px 0px 0px;
clear:both;
}
#main {
float:right;
width:688px;
background: #FFFFFF;
margin: 0px 5px 0px 0px;
padding: 0px 0px 0px 0px;
display: inline;
}
#main .category {
width:688px;
margin: 0px 0px 15px 0px;
}
#main h1 {
font-size:105%;
border-left:#003366 solid 6px;
border-bottom:#cccccc solid 1px;
height:17px;
font-size:120%;
font-weight:bold;
margin: 10px 10px 10px 10px;
padding: 11px 10px 10px 20px;
}
#main .entry_body {
margin: 15px 24px 15px 24px;
padding: 0px 0px 0px 0px;
}
#main ul {
margin: 0px 30px 0px 28px;
padding: 0px 0px 10px 0px;
}
#main ol {
margin: 0px 30px 0px 35px;
padding: 0px 0px 10px 0px;
}
#main li {
line-height: 140%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 5px 0px;
}
#side {
float:left;
font-size:12px;
width:200px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background:#336699;
color:#FFFFFF;
}
#side .category {
margin: 0px 0px 10px 0px;
padding: 0px 0px 0px 0px;
}
#side h3 {
color:#FFFFFF;
background:#003366;
font-size:12px;
text-align:left;
font-weight:bold;
margin: 5px 5px 5px 5px;
padding: 10px 10px 10px 10px;
border:#6699cc 1px solid;
}
#side .entry_body {
margin: 5px 5px 5px 5px;
padding: 10px 10px 10px 10px;
background: #6699cc;
}
#side ul {
margin: 5px 5px 5px 5px;
padding: 5px 5px 5px 5px;
background: #6699cc;
}
#side li {
line-height: 120%;
list-style:none;
margin: 5px 0px 5px 0px;
border:#336699 1px solid;
}
#side li a, #side li a:link, #side li a:visited {
color:#FFFFFF;
text-decoration:none;
display:block;
padding: 10px 10px 10px 10px;
}
#side li a:hover {
color:#333333;
background:#99ccff;
text-decoration: none;
padding: 10px 10px 10px 10px;
}
#footer {
width:900px;
height:10px;
background:#003366;
margin: 0px 0px 0px 0px;
position: absolute;
bottom: 0;
}
---------------------------------------------------------------
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_2_thumbnail_img_sm.png)
