動画を掲載すると最下部のフッターを突き抜ける

Question

CSS・HTMLでほとほと困っております。

コンテンツが少なくても、コンテンツが多くても、どちらでもフッターを最下部に常に配置させる方法をおこなってみましたが、場合によってそうなってくれません。

フッターが見えなくなるほどに縦に長くテキストをだらだらと打ってみると、この場合はフッターは常に最下部に配置してくれます。ひと画面で見えないほどにテキストを打ってみても、テキストが最下部までつらなってくれて、フッターは見えなくなります。
このときはブラウザのスクロールバーが出るので、スクロールしてみると、最下部にフッターはちゃんと配置してくれています。これは成功です。

しかし、例えばobject、embed、paramタグを使ってYouTubeにアップしている動画をリンク式で掲載してみると、とたんにダメになります。
一見、フッターは最下部に配置されています。しかし、よくみると動画コンテンツがフッターと重なっています。
ブラウザのスクロールバーが出現しているので、スクロールすると、
スクロールに合わせてフッターまでも一緒にスクロールされて上に上がってきます。
そして、フッターの下に動画コンテンツの続きが表示されています。

IE8では、フッターの上に動画コンテンツが重なっています。
Firefoxでは、動画コンテンツの上にフッターが重なっています。

どうすれば直るでしょうか？

ちなみに、以下のサイトの方法を順守して作成しました。

http://www.stylish-style.com/csstec/ultimate/fix-foot.html

yakisoba_inu · Accepted Answer

フッターの固定ですが、私はcatfish.jsを使用していますが、どうもそのサイトは現在閉鎖されているようです。

代わりに『footerFixed.js』が使用できると思います。
http://blog.webcreativepark.net/2007/11/16-01225 …
どうしても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&w … frameborder="0" allowfullscreen></iframe>

これでたぶん解消できると思います。
試してみてください。

ORUKA1951 · Answer

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 · Answer

　IE8は、HEAD内の代替スタイルシートに対応していないことを忘れてました。　外部にスタイルシートを置いてください。　HTMLと同じ位置にcssというフォルダを作成してその中に4つのスタイルシートを入れてください。HTML/CSS共にShift_JISです。　今度はスタイルシートを切り替えられるはず・・どのスタイルが希望なのかわかりませんが・・多分「フッターのみ固定かな」 ★画像は用意してください。＿＿サンプル＿＿＿＿＿＿＿＿＿＿

＿＿

本文

＿＿

＿＿＿

＿＿

＿＿＿

＿＿

＿

＿以下スタイルシート(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 · Answer

＞このときはブラウザのスクロールバーが出るので、スクロールしてみると、最下部にフッターはちゃんと配置してくれています。これは成功です。　いえ、成功していません。　紹介されているサイトは、画面(ウィンドウ)の下部にフッターを固定する方法と言っていながら、実際には。本文のサイズによって移動してしまいます。　ディスプレイの下部に固定すると、本文が短かろうが長かろうが常にディスプレイの最下部に表示され続けているはずです。　次に、オブジェクト--

動画を掲載すると最下部のフッターを突き抜ける

フッターの固定ですが、私はcatfish.jsを使用していますが、どうもそのサイトは現在閉鎖されているようです。

No.2の回答は、このシステムのバグ(アットマークがあるとメールアドレスと解釈する？)ため、しばらくお待ちください。

IE8は、HEAD内の代替スタイルシートに対応していないことを忘れてました。

＞このときはブラウザのスクロールバーが出るので、スクロールしてみると、最下部にフッターはちゃんと配置してくれています。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

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

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

　No.2の回答は、このシステムのバグ(アットマークがあるとメールアドレスと解釈する？)ため、しばらくお待ちください。

　IE8は、HEAD内の代替スタイルシートに対応していないことを忘れてました。