動画掲載時にフッターが重なる問題の解決法

前へ 次へ
このQ&Aのポイント
  • コンテンツが少なくても、コンテンツが多くても、どちらでもフッターを最下部に配置する方法を試しましたが、動画を掲載するとフッターが重なってしまいます。
  • ブラウザのスクロールバーが表示され、スクロールするとフッターと動画が一緒に上に移動してしまいます。
  • IE8では動画がフッターの上に重なり、Firefoxではフッターが動画の上に重なってしまいます。この問題をどう解決すれば良いでしょうか？
回答を見る
  • ベストアンサー

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

CSS・HTMLでほとほと困っております。 コンテンツが少なくても、コンテンツが多くても、どちらでもフッターを最下部に常に配置させる方法をおこなってみましたが、場合によってそうなってくれません。 フッターが見えなくなるほどに縦に長くテキストをだらだらと打ってみると、この場合はフッターは常に最下部に配置してくれます。ひと画面で見えないほどにテキストを打ってみても、テキストが最下部までつらなってくれて、フッターは見えなくなります。 このときはブラウザのスクロールバーが出るので、スクロールしてみると、最下部にフッターはちゃんと配置してくれています。これは成功です。 しかし、例えばobject、embed、paramタグを使ってYouTubeにアップしている動画をリンク式で掲載してみると、とたんにダメになります。 一見、フッターは最下部に配置されています。しかし、よくみると動画コンテンツがフッターと重なっています。 ブラウザのスクロールバーが出現しているので、スクロールすると、 スクロールに合わせてフッターまでも一緒にスクロールされて上に上がってきます。 そして、フッターの下に動画コンテンツの続きが表示されています。 IE8では、フッターの上に動画コンテンツが重なっています。 Firefoxでは、動画コンテンツの上にフッターが重なっています。 どうすれば直るでしょうか？ ちなみに、以下のサイトの方法を順守して作成しました。 http://www.stylish-style.com/csstec/ultimate/fix-foot.html

  • touchy
  • お礼率88% (704/796)
  • CSS
  • 回答数4
  • ありがとう数3

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

  • ベストアンサー
回答No.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> これでたぶん解消できると思います。 試してみてください。

touchy
質問者

お礼

その他にいきなり差し込みで優先業務がぼうだいに出てしまい、お礼できておりませんでした。 おかげさまで解消できそうです。作業に入ってみます。 お礼が遅くなって申し訳ありませんでした。感謝感謝です

その他の回答 (3)

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

　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)
回答No.2

　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)
回答No.1

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

touchy
質問者

お礼

ありがとうございます。 ですが、試してみましたがダメでした。 IE8では「文書構造」という行が画面最下部に配置されているものの、本文というコンテンツエリアは「これはグランドキャニオンのアップです。」の文章が終わったら背景色が切れてしまっています。画面最下部のフッターまでの間、伸びてくれないといけないのに。 また、Firefox8.0.1ですと、フッターすら最下部に配置されず、本文の「これはグランドキャニオンのアップです。」が終わったすぐ直後にフッターは配置されます。 「＿」はタブに置換しましたし、どこかおかしいんでしょうか？？

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. CSS

関連するQ&A

  • 『css/html』フッターを下部＆特殊な移動

    こんばんは。 現在Homepageを自分で作成しているのですが 頭が混乱しておりまして・・・、解決策が見つからないのでこちらに質問させていただきました。 結論としましては フッターをある範囲だけ移動(可変)するようにしたい。 現在は ブラウザ上部よりheight：650pxはメインエリアとして情報を記述。 その下にフッター(hright：50px)を配置。 フッターは下部に固定しメインエリアには食い込まない様に設定。 (ブラウザがheight：700px以下になるとスクロールバーが出現しスクロール) ブラウザがheight：700px以上の場合にはメインエリアを延ばして対応。 ここまでの動きはこんな感じです。 http://www.stylish-style.com/csstec/ultimate/sample/fixfoot-sample2.html ここまでは上記のサイト等を調べつつ作成する事が出来たのですがこの後が問題で フッターの最大位置（？）最大下部位置（？）を1000pxに設定し ブラウザが1000px以上になるとフッターの上部は固定され下部が伸びる（若しくは現れる※1） という動作にしたいのですが cssでその様な事が可能なのでしょうか？ 質問文を書くのにも矛盾が生じていると思います。 不可能なら不可能で仕方ないのですが・・・。 何卒、よろしくお願い致します。 ※1. 現れるというのは最初からフッターにheight：500pxくらいの画像を用意し それが見えてくるという意味合いです。

    • ベストアンサー
    • HTML
  • フッタを常に下部へ固定しメインコンテンツ部をスクロールさせる方法

    現在 http://www.stylish-style.com/csstec/ultimate/fix-foot.html で紹介されている方法を使いフッタを常に最下部へ表示させています。#containerでページを囲み、#mainでフッタのパンディングを確保、 #mainのheightは100%-フッタ用パンディングの30pxとなっています。 #main内にヘッダ、ナビゲーションを上部から順に配置し ナビゲーション以降を#main2としコンテンツ部として表示させようと考えています。 ただ、この方法ではフッタが固定されるもののコンテンツはどんどん下へと伸びてしまいます。 私の考えている表示としては、 (1)コンテンツ部は常にフッタまでボックスを広げる。 (2)コンテンツがoverflowした場合はスクロールする。 この2点をクリアさせたいです。 #main2のheightをピクセルで固定させればできそうですが 解像度の変化に対応できないと思うので… どなたか良い方法を知っている方がいれば教えていただければ幸いです。 htmlとcssは下記URLです。 http://beatprovider.info/test/index.html http://beatprovider.info/test/style_d.css よろしくお願いします。

    • 締切済み
    • CSS
  • XHTML+CSSでフッターを下部に固定させるには？

    http://www.hddx.net/hc2/_index.html ※CSSファイル http://www.hddx.net/hc2/includes/main.css 上記のようなサイトを制作しており、フッター画像をウィンドウサイズに関わらず、下部に固定させようとしています。 下部に固定させ、ウィンドウサイズの変更にも対応できたのですが、 ウィンドウの縦幅をどんどん狭くしていくと、フッター画像が上のコンテンツにかぶっていってしまいます。 http://www.lucky-bag.com/archives/2005/04/footer.html http://www.stylish-style.com/csstec/ultimate/fix-foot.html 上記サイトを参考にしたのですが、どうしてもうまく対応しません。 どなたかお分かりでしたらご教授頂きたいと思います。 宜しくお願い致します。

  • フッターが常に画面最下部に表示されるように

    通常ページが縦長の場合フッターはスクロールしないと見えません。 常に画面最下部にフッターを表示するにはどうしたらいいでしょうか・・？ 【条件】 ・フレームは使わない。（SEO対策のため） ・モニターのサイズに関わらず、ブラウザの表示サイズに関わらず常に表示領域の最下部にフッターがくる ・javascriptで追いかけてくる形ではなく下にぴったり（動かずに）表示される ちなみにjavascriptではこのような形です。 http://www.view-bridge.com/sample/ ご存知の方、何か良いアイデアをお持ちの方どうぞお助け下さいませ！！ よろしくお願いします！！

  • フッター固定で余白ができます

    footerFixed.js　http://blog.webcreativepark.net/2007/11/16-012253.html　 を使ってhtmlのフッターを下部に固定させてみたところ、コンテンツが少ない量でページの最後にフッターが表示されるようになったのですが、コンテンツがあるコンテナが下部にのびず、背景が見えてしまう状態で尚かつ、コンテンツの最後から妙に大きな空白が開きます。 ブラウザで確認するとウインドウをリサイズすると戻るのですが、原因や対処がまったくわかりません。 どなたかコンテンツをフッターにつけた状態でフッターを下部に表示し、コンテンツが多い場合にはスクロールでフッターが出るようにするにはどのような方法で対応できるでしょうか。どなたかご意見いただければと思います。

    • ベストアンサー
    • HTML
  • フッターを最下部に固定する方法

    コンテンツが少ない場合でも、 フッターが中途半端な位置にならないように最下部に固定したいと思っています。 といっても常に最下部にしたいわけではなく、 コンテンツが多い場合は画面の外に出るようにしたいのです。 この希望と同じ質問を拝見したのですが解決できませんでした。 どなたかご存知の方、よろしくお願いします。

    • ベストアンサー
    • HTML
  • html?/css?/Javascript? でのフッター特殊な固定方

    html?/css?/Javascript? でのフッター特殊な固定方法について。 こんばんは。 現在ホームページを作成中です。 そこでフッターをブラウザの下部に固定しようと思い google等で検索し見つける事が出来ました。 ソースは色々ありますが例として下記のURLで説明したく思います。 http://www.css-lecture.com/template/2009/0212/ 私の希望・やりたい事としては上記のサイトに追加内容で (1).ヘッダーをブラウザ上部に固定。 (2).ブラウザの上下を縮めた時、フッターとヘッダが重ならないよう、最小高さを指定。 (3).(2)を実装時、フッタとヘッダがある程度寄るとスクロールバーが出てくると思いますが 　 スクロールした時にスクロールするのは内容のみ。 　 (フッタがブラウザ下部に隠れたとしてもスクロール時に移動してはいけない) です。 ここ最近試行錯誤しcssを書いていますが (3)を実装時に不具合が多く困っています。 ヘッダをブラウザ上部に、フッタをブラウザ下部に固定して スクロールした時、内容と同時にフッタまで上にスクロールされたり フッタを完全に固定してしまうと、ヘッダとフッタの最小間隔が指定できなかったり。 【簡易説明】 ヘッダは上部固定、フッタは下部に固定して ヘッダとフッタはブラウザの上下を縮めても重ならない様、最小値を指定し スクロールでスクロールするのは内容・記事のみ。 こんな事が可能なのかどうなのかも私の乏しい知識では判りませんので どなたか詳しい方いらっしゃいましたらご教授お願い致します。 内容・記事としてのスクロールバーと ヘッダ、フッタの最小値以上縮めた時のスクロールバーが入り組んでいる形になるので 不可能なんでしょうか・・・・。 また、もし参考サイト等がありましたら URLの誘導のみでも結構です。 何卒、宜しくお願い致します。（涙 また、乱文で大変失礼致しました。

    • ベストアンサー
    • HTML
  • フッターのCSSに関して

    フッターのCSSの処理でわからず困っています。 やりたいことは以下の通りです。 １．ブラウザが十分に大きい場合は一番下にフッターを置く。 ２．もしブラウザの大きさが取れない場合はフッターの上の部分の終了後にフッターを置きたい。 フッターはposition: absolute;で指定してあるのでブラウザが十分に大きい場合は問題ないのですが、ブラウザを小さくして最表示した場合にフッター部分がメインの部分のところに被ってしまいます。 出来ればメインコンテンツの下部がフッターの上部より下にある場合はメインコンテンツの下にフッターがくる用に修正したいです。

    • ベストアンサー
    • CSS
  • ヘッダとフッタが固定でコンテンツのみスクロール可能

    いつもお世話になります。 ヘッダ部とフッタ部は固定で、コンテンツ部のみで表示エリアを超えた場合スクロールバーを 表示する、というHTMLを実現するにはどうすればよいでしょうか。 （ウィンドウサイズに応じてコンテンツ部は変動するが、ヘッダとフッタは常に固定） イメージとしては以下の構成になります。いろいろ調べてみたのですが、ヘッダとフッタは固定 できてもスクロールバーがウィンドウ全体に表示されてしまうものばかりでした。 -------------------------------- ヘッダ（固定） （スクロールバーなし） -------------------------------- コンテンツ （スクロールバーあり） -------------------------------- フッタ（固定） （スクロールバーなし） -------------------------------- フレームは使用せず、CSSのみで実現する方法を教えて頂けませんでしょうか。 IE7、IE8で動作させたいと思っています。 宜しくお願いします。

    • 締切済み
    • CSS
  • 常にスクロールを最下部に

    写真のように上からテキストが表示されるんですが、常にスクロールを最下部にするにはどうしたらいでしょう？

    • ベストアンサー
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する