★★★フッター最下部固定/スクロール時も常に最下部に固定させる方法

解決済

質問者：h-tester
質問日時：2009/05/06 17:06
回答数：2件

【OS】Windws XP HomeEdition
【ブラウザ】InternetExplorer7
【参照URL】http://nowtester.web.fc2.com/tester.html

ご覧頂きまして誠に有難う御座います。
皆様のお知恵を貸して頂ければ幸いです。

現在、下記URLの様なHTMLでHPを制作しております。
http://nowtester.web.fc2.com/tester.html
当方の意向として、フッターに該当するコピーライト表記を、
どのサイズのモニターから閲覧しても、
画面最下部に固定表示したいと考えております。
(スクロールが発生した際に見える位置の最下部に常に固定させたい)

現在のページも、一見、開いた際には最下部に固定表示されますが、
画面のリサイズを実施した場合、最下部に固定されていたフッターは、
最初に開いた画面の最下部として表示された位置で固定されており、
スクロール時ズルズルと画面と一緒にズリ上がってしまいます。

別サイト様の過去投稿に参考になりそうなモノが有りましたが、
現在私が書いているHTMLへの実装が上手く行きませんでした。
http://gac.kir.jp/21/13599(りゅう様の最後の投稿)

意図としては↑の様なモノを現在のHTMLに実装出来ればベストですが、
私の挿入位置が悪いのか上手く行きません。
具体的にどの様に書き足せば意図するモノが完成するか、
ソースの組み方を教えて頂けますと幸いです。

因みに、↑投稿のりゅう様が書かれているHTMLだけだと成功しますが、
あくまでも私が現在書いているHTMLに書き足す場合の方法を教えて下さい。
以上、何卒よろしくお願い致します。

通報する

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

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： font_color
回答日時：2009/05/07 14:06

「要素の下に表示」ということでは違うみたいですね。

「常に画面の下」に表示させるのは「position:fixed;」を使用します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>テスト中</title>
<style type="text/css">

</style>

</head>

<body>

<div id="maincontents">
<div class="img1"><img src="back.jpg" /></div>

<div class="img2">
<img src="back-trans.png" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="16,25,245,208" href="★★★" target="_blank" />
</map>
</div>
</div>
<div id="footer">
コピーライト表記＠フッター固定
</div>

</body>
</html>

これでどうでしょうか？

- 0
- 件

通報する

この回答へのお礼

font_color様

ご丁寧にご回答頂きまして誠に有難う御座います！！
早速試してみた所、無事に意図通りの最下部固定が実装出来ました！
お陰様で1つ問題が解決してホっとしております。

※しかし別件で、back.jpgを常に画面サイズに対して上下100%指定していた指令は実行されなくなってしまいました。今度はこれを戻す方法を試してみたいと思います※

本当にご親切に教えて頂けましてとても助かりました。
また別の質問等に関してもお時間が許す限りお力を貸して頂けますと幸いです。

以上、よろしくお願い致します。

通報する

お礼日時：2009/05/09 00:11

No.1

回答者： font_color
回答日時：2009/05/07 01:32

かなり試行錯誤されたみたいで・・HTMLがごちゃごちゃなので少し整理しました。

※必要な要素が良く分からないので後はご自分で足してください。
【HTML】
<div id="maincontents">
<div class="contents">
<div class="img1"><img src="back.jpg" /></div>

<div class="img2">
<img src="back-trans.png" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="16,25,245,208" target="_blank" />
</map>
</div>

</div>
<div id="footer">
コピーライト表記＠フッター固定
</div>
</div>
【CSS】
html,body {
background-color: #000000;
width:100%;
height:100%;
padding:0;
margin:0;
color: #FFFFFF;
}
#maincontents {
position: relative;
height: 100%;
min-height: 100%;
width:100%;
background-image: url(image/back.jpg);
background-repeat: no-repeat;
}
body>#maincontents{
height:auto;
}
.contents{
padding-bottom: 20px;
}
.img1{
text-align:cenetr;
}
.img2{
text-align:cenetr;
position:absolute; top:-84px;←※1
}
.img2 img{
border:none;
}
#footer {
background:#555;
position:absolute;bottom:0;
height:20px;←※2
width:100%;
text-align:center;
margin:0px;
filter:dropshadow(color=#999999,offX=1,offY=1);
}
※1元の数値の意味が分かりませんでした。調整してください。
※2調整してください。

ちなみにですが、
＞スクロールが発生した際に見える位置の最下部に常に固定させたい
とは「要素の下に表示」ということですよね？
「常に画面の下に表示」ということならやり方が変わってきます。

この回答への補足

font_color様

重ねてご回答下さいまして誠に有難う御座います。助かります。
そうですね…自分でもかなりカオスなHTMLになっていると思います;
整理して頂けて勉強になります。どうも有難う御座います。

本件に関しては、要素の下と言うよりも、
やはり画面最下部表示…と言う方が誤解が無い様に思います。

参考画像を追加させて頂きましたが、画像の様に、
一度全画面で開いているブラウザをリサイズし、
自動で上下スクロールバーが表示された際、
下にスクロールするのと同時に最下部に有ったコピーライト表記も一緒にズリ上がってしまう為、
これを常に目で見て画面の最下部に固定させられればと思いました。
(フレームを利用せずに)

ページ全体はスクロールしても、フッターだけは最下部の位置から動かさない様にしたいと思っております。単純に私の頭の中のイメージですと、
大きなページの上に位置固定レイヤーを乗せ2重表示させている様な感覚のモノになれば良いのかな…とか考えてますが、無謀でしょうか。

質問の中に記載させて頂いたフォーラムで紹介されている方法が、
今の私のHTMLで実装出来れば良いのですが…。

解釈違いが御座いましたら大変申し訳有りません。
何かお気づきの点が御座いましたらご連絡頂けますと幸いです。