重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

【GOLF me！】初月無料お試し

[CSS]　常にフッターは下部に表示　IE7

解決済

  • 質問者：mayugen148
  • 質問日時：
  • 回答数：2件

常にフッターは下部にくるように下記のスタイルとhtmlを使用しております。
内容が少ない場合でも、下記のように常に画面一番下にくるようになっております。

----------------------------
内容







----------------------------
フッター部
----------------------------


【HTML側】

<body>
　　　<div id="container">
　　　　　<div id="main"><p>内容</p></div>
　　　　　<div id="footer">Copyright</div>
　　　</div>
</body>


【CSS】
body,html{height:100%;}
#container {border:1px #000 solid; width: 900px; margin: 0px auto;position: relative;height: 100%;min-height: 100%;}
body > #container {height: auto;}
#main {background:#f00;padding-bottom: 100px;}
#footer {background:#ff0; position: absolute; bottom: 0px;left:0px; height: 100px; width: 100%;}


IE9などですと、最初に画面を開いて一番下にいたフッターが、
画面サイズを広げると一緒にくっついて一番したのままでいるのですが、
IE７で見ると、最初に開いた画面では一番下にいるのに、画面を広げると
その場所のままです。更新をかけると一番下に移動するのですが、
これはIE7では無理なのでしょうか？
広げたら一緒にフッター部がくっついていってほしいのですが、わかる方が
いらっしゃいましたら、ご教授お願いいたします。

通報する

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

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

javascript(fixed.js)を使うのに、その説明をしていませんでした。


doxdesk.com: software: fixed.js ( http://www.doxdesk.com/software/js/fixed.html )
の下にあるmoduleを右クリックして、fixed.jsと名前をつけて適当なところにおいてください。
<!--[if lt IE 7]>
<script type="text/javascript" src="./js/fixed.js"></script>
<![endif]-->
のように、リンクも保存場所に合わせて訂正してください。
googleのライブラリを使ってもよいかも
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(bet …
<![endif]-->

なお、fixedは、画面の下側に表示するpositionの値ですから、必然的にその下に表示される内容にかぶさりますから、その要素のmargin-bottomかpadding-bootomでfooterの最大高さの値を設定するのが良いです。
　absoluteを使う方法もありますが、その場合表示部分がウィンドウ高さより高いとfooterが表示されません。

　色々な小細工はありますが、HTMLの本来の目的が「様々な環境で利用できる」と言うものがある限り、小細工は薦めません。
　position:fixedでウィンドウ下部に表示して、かぶさってしまう要素にmin-heightとmargin/paddingを設定するのが良いでしょう。
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： ORUKA1951
  • 回答日時：

画面の最下段に要素を配置する本来の方法はfixedです。


旧IEはFixedに対応していないため、javascriptを使うほうが良いでしょう。
IEのために、おかしなスタイルシートを記述する必要がなくなります。いずれIEをバージョンアップすれば解決する問題ですから
　もちろんHTMLは標準モードで作成し、DOCTYPEスイッチ( https://www.google.co.jp/search?q=DOCTYPE%E3%82% … )で、標準モードで動作するようにしておくこと。そうしないと、様々なところでIEと他の標準ブラウザとのズレで悩まされ続けることになります。
　さらに、HTML4.01strict,XHTML1.0strict,XHTML1.1で作成することを心がけましょう。私は、色々な理由でHTML4.01strictを勧めています。

★Another HTML-lint 5 ( http://www.htmllint.net/en/html-lint/htmllint.ht … )
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
でチェックずみ。HTML4.01strict+CSS2.1 のウェブ標準です。
タブは＿に置換してありますのでタブに戻してください。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
<!--[if lt IE 7]>
＿<script type="text/javascript" src="/js/fixed.js"></script>
<![endif]-->
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<style type="text/css">
<!--
html,body{margin:0;padding:0;}
body{background-color:gray;}
p{margin:0 10%;text-indent:1em;line-height:2em;}
div.header,div.section,div.footer{margin:0;background-color:white;width:100%;}
div.section{min-height:100%;padding-bottom:100px;}
h1,h2,h3{margin:0;line-height:1.6em;}
div.footer{background-color:yellow;position:fixed;bottom:0;height:100px;}
-->
＿</style>
</head>
<body>
＿<div class="header">
＿＿<h1>サンプル</h1>
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<p>
＿＿＿IE9などですと、最初に画面を開いて一番下にいたフッターが、画面サイズを広げると一緒にくっついて一番したのままでいるのですが、IE７で見ると、最初に開いた画面では一番下にいるのに、画面を広げると、その場所のままです。更新をかけると一番下に移動するのですが、これはIE7では無理なのでしょうか？
＿＿</p>
＿＿<p>
＿＿＿・・・【中略】・・・
＿＿</p>
＿＿<p>
＿＿＿広げたら一緒にフッター部がくっついていってほしいのですが、わかる方がいらっしゃいましたら、ご教授お願いいたします。
＿＿</p>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿</div>
</body>
</html>

この回答への補足

ORUKA1951様、返信ありがとうございます。


ORUKA1951様のサンプルソースで試してみたところ、
IE９の時点で確認したらフッターが下部になっておりましたが、
画面を縮めたときに、フッターが内容の上にかかるようになってしまい、
できれば画面を縮めた際は、内容の上にはかからず
内容の下にフッターがくるようにしたいです。
(　説明不足ですみません（＞＜）　)


こんな感じです。
画面広いとき↓
----------------------------
内容






----------------------------
フッター
----------------------------


画面ちぢめたら↓

----------------------------
内容
----------------------------
フッター
----------------------------


その際も、このfixedを使用してどうにかすればフッターの位置を
内容の下にもってこられるのでしょうか？
何度もご質問して申し訳ありませんが、宜しくお願いいたします。

補足日時：2012/09/18 14:27
通報する
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

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

Q質問する（無料）

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

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

おすすめ情報