- ベストアンサー
動画掲載時にフッターが重なる問題の解決法
- コンテンツが少なくても、コンテンツが多くても、どちらでもフッターを最下部に配置する方法を試しましたが、動画を掲載するとフッターが重なってしまいます。
- ブラウザのスクロールバーが表示され、スクロールするとフッターと動画が一緒に上に移動してしまいます。
- IE8では動画がフッターの上に重なり、Firefoxではフッターが動画の上に重なってしまいます。この問題をどう解決すれば良いでしょうか？
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
フッターの固定ですが、私はcatfish.jsを使用していますが、どうもそのサイトは現在閉鎖されているようです。 代わりに『footerFixed.js』が使用できると思います。 http://blog.webcreativepark.net/2007/11/16-012253.html どうしてもCSSでやりたい！という場合は無理ですが、javascriptでもいいよという場合は使用してみてください。 ちなみにこのサイトの中にはCSSで固定する方法も書き込まれています。 それと、フッターを固定した場合、YouTubeの動画を埋め込むと固定したフッターの上にかぶって表示されると言う現象がIEとGoogle Chromeのみで起こりました。 （catfish.jsを使用した場合ですが） もし、そのような現象が起きた場合、以下の処理を行ってみてください。 私は以下のサイトを参照して回避できました。 http://black-flag.net/html/20110711-3316.html 埋め込みタグの中に『&wmode=transparent』を追記します。 追記前：<iframe width="425" height="349" src="http://www.youtube.com/embed/5xLLvnAtBig?rel=0" frameborder="0" allowfullscreen></iframe> 追記後：<iframe width="425" height="349" src="http://www.youtube.com/embed/5xLLvnAtBig?rel=0&wmode=transparent" frameborder="0" allowfullscreen></iframe> これでたぶん解消できると思います。 試してみてください。
その他の回答 (3)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
No.2の回答は、このシステムのバグ(アットマークがあるとメールアドレスと解釈する？)ため、しばらくお待ちください。 本文(サンプルではdiv.section)がどこまで伸びているかわかるように、本分のみ背景色を付けていますが、これをdiv.footerまで伸ばすのでしたら、body自体に背景色を指定するのが楽です。また、footerの位置をsectionの位置を基準に配置するとか・・ いまひとつ、具体的な内容がわからないので一般論的な回答にしかなりませんが、ただ、「スクロールに合わせてフッターまでも一緒にスクロールされて上に上がってきます。」の原因がfloatやabsoluteに有る可能性もあります。 positionやabsoluteの挙動を理解されると解決する問題だとは思います。たぶん、これを理解しておかないと、今後も悩むことになるでしょう。すみません一般論で・・ ★視覚整形モデル ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html )
- ORUKA1951
- ベストアンサー率45% (5062/11036)
IE8は、HEAD内の代替スタイルシートに対応していないことを忘れてました。 外部にスタイルシートを置いてください。 HTMLと同じ位置にcssというフォルダを作成してその中に4つのスタイルシートを入れてください。HTML/CSS共にShift_JISです。 今度はスタイルシートを切り替えられるはず・・どのスタイルが希望なのかわかりませんが・・多分「フッターのみ固定かな」 ★画像は用意してください。 <!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"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<link rel="stylesheet" type="text/css" media="screen" href="./css/default.css"> ＿<link rel="stylesheet" type="text/css" media="screen" href="./css/standard.css" title="標準"> ＿<link rel="Alternate StyleSheet" type="text/css" media="screen" href="./css/h-f-fix.css" title="ヘッダフッタ固定"> ＿<link rel="Alternate StyleSheet" type="text/css" media="screen" href="./css/f-fix.css" title="フッタ固定"> </head> <body> ＿<div class="header"> ＿＿<h1>サンプル</h1> ＿</div> ＿<div class="section"> ＿＿<h2>本文</h2> ＿＿<div class="figure"> ＿＿＿<object data="./images/2.jpg" type="image/jpeg" width="640" height="480"> ＿＿＿＿これはグランドキャニオンの<EM>アップ</EM>です。 ＿＿＿</object> ＿＿</div> ＿＿<div class="figure"> ＿＿＿<object data="./images/2.jpg" type="image/jpeg" width="640" height="480"> ＿＿＿＿これはグランドキャニオンの<EM>アップ</EM>です。 ＿＿＿</object> ＿＿</div> ＿</div> ＿<div class="footer"> ＿<h2>文書情報</h2> ＿</div> </body> </html> 以下スタイルシート(default.css) @charset "Shift_JIS"; html,body{margin:0;padding:0;} div.header{height:100px;background-color:yellow;} div.footer{height:50px;background-color:gray;} div.section{background-color:silver;} h1,h2,h3,p{margin:0 auto;} div.figure{width:640px;margin:0 auto;} 以下スタイルシート @charset "Shift_JIS"; /* 何も書かなくて良い */ 以下スタイルシート(h-f-fix.css) @charset "Shift_JIS"; html,body{height:100%;} div.header,div.footer{position:fixed;width:100%;} div.header{top:0;} div.footer{bottom:0;} div.section{margin:0;padding:100px 0 50px 0;} 以下スタイルシート(f-fix.css) @charset "Shift_JIS"; html,body{height:100%;position:relative;} div.footer{position:fixed;} div.footer{bottom:0;width:100%;} div.section{margin:0 0 50px 0;background-color:silver;overflow:auto;}
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞このときはブラウザのスクロールバーが出るので、スクロールしてみると、最下部にフッターはちゃんと配置してくれています。これは成功です。 いえ、成功していません。 紹介されているサイトは、画面(ウィンドウ)の下部にフッターを固定する方法と言っていながら、実際には。本文のサイズによって移動してしまいます。 ディスプレイの下部に固定すると、本文が短かろうが長かろうが常にディスプレイの最下部に表示され続けているはずです。 次に、オブジェクト--<img><object><embd>などの要素-- Objects, Images, and Applets in HTML documents ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/objects.html ) --は、置換インライン要素と呼ばれるグループで、そのサイズは内容(と指定サイズ)によって変わり、かつインライン要素でブロック要素内にしか存在しえません。【この場合は、リンクではありません。リンクとは、他のデータに移動する場合だけです。--http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/links.html 】 <p><img></p> <div><object></object></div> 最下段に、フッターを表示する場合は、まったく普通でよいです。何も指定しなくてもそうなるはず。 以下に簡単なソースをあげておきます。ブラウザの表示メニューからスタイルシートの項目を見つけて、三種類の表示方法を確認してください。なお、印刷の場合は、特に指定していませんから素のHTMLとして印刷されます。 ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済みのHTML4.01strictです。 タブは＿に置換してありますから戻すこと。 class名は、文書構造を示すものにしてあります。 「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」 class名は、HTML5 における HTML4 からの変更点の新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )名とその意味を基にしています。 <!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"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css" media="screen"> <!-- html,body{margin:0;padding:0;} div.header{height:100px;background-color:yellow;} div.footer{height:50px;background-color:gray;} div.section{background-color:silver;} h1,h2,h3,p{margin:0 auto;} div.figure{width:640px;margin:0 auto;} --> ＿</style> ＿<style type="text/css" title="標準" media="screen"> <!-- --> ＿</style> ＿<style type="text/css" title="フッターヘッダ固定" media="screen"> <!-- html,body{height:100%;} div.header,div.footer{position:fixed;width:100%;} div.header{top:0;} div.footer{bottom:0;} div.section{margin:0;padding:100px 0 50px 0;} --> ＿</style> ＿<style type="text/css" title="フッターのみ固定"> <!-- html,body{height:100%;position:relative;} div.footer{position:fixed;} div.footer{bottom:0;width:100%;} div.section{margin:0 0 50px 0;background-color:silver;overflow:auto;} --> ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>サンプル</h1> ＿</div> ＿<div class="section"> ＿＿<h2>本文</h2> ＿＿<div class="figure"> ＿＿＿<object data="./images/2.jpg" type="image/jpeg" width="640" height="480"> ＿＿＿＿これはグランドキャニオンの<EM>アップ</EM>です。 ＿＿＿</object> ＿＿</div> ＿＿<div class="figure"> ＿＿＿<object data="./images/2.jpg" type="image/jpeg" width="640" height="480"> ＿＿＿＿これはグランドキャニオンの<EM>アップ</EM>です。 ＿＿＿</object> ＿＿</div> ＿</div> ＿<div class="footer"> ＿<h2>文書情報</h2> ＿</div> </body> </html>
お礼
ありがとうございます。 ですが、試してみましたがダメでした。 IE8では「文書構造」という行が画面最下部に配置されているものの、本文というコンテンツエリアは「これはグランドキャニオンのアップです。」の文章が終わったら背景色が切れてしまっています。画面最下部のフッターまでの間、伸びてくれないといけないのに。 また、Firefox8.0.1ですと、フッターすら最下部に配置されず、本文の「これはグランドキャニオンのアップです。」が終わったすぐ直後にフッターは配置されます。 「＿」はタブに置換しましたし、どこかおかしいんでしょうか？？
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_1_thumbnail_img_sm.png)
お礼
その他にいきなり差し込みで優先業務がぼうだいに出てしまい、お礼できておりませんでした。 おかげさまで解消できそうです。作業に入ってみます。 お礼が遅くなって申し訳ありませんでした。感謝感謝です