dポイントプレゼントキャンペーン実施中！

フッターを固定したい…

解決済

  • 質問者：gouryella
  • 質問日時：
  • 回答数：1件

上の写真のように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}

「フッターを固定したい…」の質問画像
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (1件)

No.1ベストアンサー

ブラウザの描画領域に対して固定するのはposition:fixed;です。


#main {
　　padding-bottom:210px;
　　}

#div4 {
　　width:800px;
　　height:210px;
　　position:fixed;
　　bottom:0;
　　background-image:url("div4.jpg")
　　}

これだけ。ただし、IE6あたりは対応できません。「IE 固定配置」
でググって複雑なことをしてください。
    • good
    • 0
    • 件
通報する
この回答へのお礼

返信ありがとうございます。
おかげで固定することができました。

padding-bottomを使うのですね！
fixedはわかったのですが・・！

IE6のことは検討してみます。
本当にありがとうございました。

通報する
お礼日時：2009/04/02 10:27

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報