※ ChatGPTを利用し、要約された質問です（原文：フッターを固定したい…）
フッターを固定したい…
上の写真のようにDivを組んでいるのですが、
Div4のフッタをブラウザに固定して表示したいのですが、どうすればよろしいのでしょうか?
Div4はCSSでbackground-imageとして画像(jpg)が指定されています。
●html
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css">
<title>test</title>
<link rel="stylesheet" href="design.css" type="text/css">
<style type="text/css">
</style>
</head>
<body>
<div id="body">
<div id="main">
<div id="div1">
<p class="clip">
<img src="clip.jpg"alt="New clip!">
</p>
<p class="b-design">
<a href="design.html">
<img src="b-design.jpg">
</a>
</p>
<p class="b-photo">
<a href="photo.html">
<img src="b-photo.jpg">
</a>
</p>
<p class="b-mail">
<a href="mailto:a@com">
<img src="b-mail.jpg">
</a>
</p>
</div>
<div id="div2">
</div>
<div id="div3">
</div>
</div>
<div id="div4">
</div>
</div>
</body>
</html>
●CSS
* {margin:0; padding:0}
body {background-color:black; width:100%;}
img {border-style:none}
#body {position:relative; margin: 0 auto; width:800px}
#main {}
#div1 {float:left; width:330px; height:370px; background-image:url("div1.jpg")}
#div2 {float:left; width:470px; height:370px; background-image:url("div2.jpg")}
#div3 {float:clear; width:800px; height:800px; background-image:url("div3.jpg")}
#div4 {float:clear; width:800px; height:210px; background-image:url("div4.jpg")}
.clip {position:absolute; top:30px; left:20px}
.b-design {position:absolute; top:290px; left:30px}
.b-photo {position:absolute; top:320px; left:30px}
.b-mail {position:absolute; top:350px; left:30px}
お礼
返信ありがとうございます。 おかげで固定することができました。 padding-bottomを使うのですね！ fixedはわかったのですが・・！ IE6のことは検討してみます。 本当にありがとうございました。