【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に書き足す場合の方法を教えて下さい。
以上、何卒よろしくお願い致します。
No.1
- 回答日時:
かなり試行錯誤されたみたいで・・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で実装出来れば良いのですが…。
解釈違いが御座いましたら大変申し訳有りません。
何かお気づきの点が御座いましたらご連絡頂けますと幸いです。
No.2ベストアンサー
- 回答日時:
「要素の下に表示」ということでは違うみたいですね。
「常に画面の下」に表示させるのは「position:fixed;」を使用します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<!--[if lt IE 7]>
<script type="text/javascript" src="unitpngfix.js"></script>
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>テスト中</title>
<style type="text/css">
<!--
*{
margin:0;
padding:0;
}
html,body{
height:100%;
background-color: #000000;
color: #FFFFFF;
}
html{
overflow-y:scroll;
}
div#maincontents{
background-image: url(image/back.jpg);
}
.img1{
text-align:cenetr;
}
.img2{
position:absolute; top:-84px;
text-align:cenetr;
}
.img2 img{
border:none;
}
div#footer{
position:fixed;
bottom:0;
left:0;
text-align:center;
width:100%;
filter:dropshadow(color=#999999,offX=1,offY=1);
}
/* * * IE6 * * * */
* html,
* html body{
overflow-y:hidden;
}
* html div#maincontents{
height:100%;
overflow-y:scroll;
}
* html div#footer{
position:absolute;
bottom: expression(this.parentNode.clientHeight % 2 == 0 ? 0 : -1);
}
-->
</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>
これでどうでしょうか?
font_color様
ご丁寧にご回答頂きまして誠に有難う御座います!!
早速試してみた所、無事に意図通りの最下部固定が実装出来ました!
お陰様で1つ問題が解決してホっとしております。
※しかし別件で、back.jpgを常に画面サイズに対して上下100%指定していた指令は実行されなくなってしまいました。今度はこれを戻す方法を試してみたいと思います※
本当にご親切に教えて頂けましてとても助かりました。
また別の質問等に関してもお時間が許す限りお力を貸して頂けますと幸いです。
以上、よろしくお願い致します。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSS <div>の入れ子が反映さ...
-
フッター上部に謎の隙間
-
Ctrl+F(検索)の窓を出したいの...
-
clear: bothの事で質問です。
-
スタイルシートで画面を上下に...
-
サイトにコンテンツを並べる際...
-
relativeについて
-
popupウィンドウでborderがcoll...
-
チェックボックスの背景色って...
-
MAX関数を使ってからLEFT JOIN...
-
iframe内のリンクが飛ばないの...
-
jqueryで要素の中身を要素の外...
-
変数内容をHTML内で表示する方法
-
c++std::string型をTCHARに変換...
-
removeEventListenerについて
-
複数画像のランダム複数表示(...
-
JSPでの画像ファイル表示
-
外部javascriptの重複を防ぐには
-
CSSで背景をランダム表示さ...
-
ダブルクォーテーションが消え...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
スライダーの枠に動画を収める...
-
フッター上部に謎の隙間
-
【CSS】floatで左右に並べた...
-
オンマウス時に別画像を上に重...
-
CSS <div>の入れ子が反映さ...
-
文字を固定したいのですが…
-
Ctrl+F(検索)の窓を出したいの...
-
テーブルの1つのセル内で、上揃...
-
CSS のみのタブ切り替えについて
-
フッターの下に隙間ができてしまう
-
スクロール可能なチェックボックス
-
Flickity で画像にリンクを貼る...
-
スマートフォンで適切に見られ...
-
floatさせたdivタグを折り返さ...
-
オープニングにアニメーション...
-
html/cssで要素が出てこなくて...
-
チェックボックスの背景色って...
-
サイトにコンテンツを並べる際...
-
CSS 可変マージン
-
HTML CSS 文字化け
おすすめ情報