Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
  • ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:[CSS] 常にフッターは下部に表示 IE7)

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

このQ&Aのポイント
  • 常にフッターは下部にくるように設定するためのCSSとHTMLのコードを提供します。
  • IE9などでは画面を広げてもフッターが一番下にくっついて残るが、IE7ではそうならない。
  • IE7で画面を広げるとフッターがその位置に残るため、更新すると一番下に移動する。

質問者が選んだベストアンサー

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

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(beta4)/IE7.js"></script> <![endif]--> なお、fixedは、画面の下側に表示するpositionの値ですから、必然的にその下に表示される内容にかぶさりますから、その要素のmargin-bottomかpadding-bootomでfooterの最大高さの値を設定するのが良いです。  absoluteを使う方法もありますが、その場合表示部分がウィンドウ高さより高いとfooterが表示されません。  色々な小細工はありますが、HTMLの本来の目的が「様々な環境で利用できる」と言うものがある限り、小細工は薦めません。  position:fixedでウィンドウ下部に表示して、かぶさってしまう要素にmin-heightとmargin/paddingを設定するのが良いでしょう。

すると、全ての回答が全文表示されます。

その他の回答 (1)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.1

画面の最下段に要素を配置する本来の方法はfixedです。 旧IEはFixedに対応していないため、javascriptを使うほうが良いでしょう。 IEのために、おかしなスタイルシートを記述する必要がなくなります。いずれIEをバージョンアップすれば解決する問題ですから  もちろんHTMLは標準モードで作成し、DOCTYPEスイッチ( https://www.google.co.jp/search?q=DOCTYPE%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:ja:official&hl=ja&client=firefox-a )で、標準モードで動作するようにしておくこと。そうしないと、様々なところでIEと他の標準ブラウザとのズレで悩まされ続けることになります。  さらに、HTML4.01strict,XHTML1.0strict,XHTML1.1で作成することを心がけましょう。私は、色々な理由でHTML4.01strictを勧めています。 ★Another HTML-lint 5 ( http://www.htmllint.net/en/html-lint/htmllint.html# ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) でチェックずみ。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などですと、最初に画面を開いて一番下にいたフッターが、画面サイズを広げると一緒にくっついて一番したのままでいるのですが、IE7で見ると、最初に開いた画面では一番下にいるのに、画面を広げると、その場所のままです。更新をかけると一番下に移動するのですが、これはIE7では無理なのでしょうか? __</p> __<p> ___・・・【中略】・・・ __</p> __<p> ___広げたら一緒にフッター部がくっついていってほしいのですが、わかる方がいらっしゃいましたら、ご教授お願いいたします。 __</p> _</div> _<div class="footer"> __<h2>文書情報</h2> _</div> </body> </html>

mayugen148
質問者

補足

ORUKA1951様、返信ありがとうございます。 ORUKA1951様のサンプルソースで試してみたところ、 IE9の時点で確認したらフッターが下部になっておりましたが、 画面を縮めたときに、フッターが内容の上にかかるようになってしまい、 できれば画面を縮めた際は、内容の上にはかからず 内容の下にフッターがくるようにしたいです。 ( 説明不足ですみません(><) ) こんな感じです。 画面広いとき↓ ---------------------------- 内容 ---------------------------- フッター ---------------------------- 画面ちぢめたら↓ ---------------------------- 内容 ---------------------------- フッター ---------------------------- その際も、このfixedを使用してどうにかすればフッターの位置を 内容の下にもってこられるのでしょうか? 何度もご質問して申し訳ありませんが、宜しくお願いいたします。

すると、全ての回答が全文表示されます。

関連するQ&A