Q&A
cssの問題かと思いますので、cssの掲載お願いします。
画像の様にページを組んであるんですが、このページファイルとsaid.htmlをWhopperで囲んであり、その下にfooterを持って来ています。
HTML
1<html> 2 <body> 3 「header.html」の呼び出し。 4 <div id="Whopper"> 5 このページファイル 6 said.html呼び出し 7 </div> 8 header.htmlの呼び出し 9 </body> 10</html>
こういう設計にしたんですが、このページファイルという所が長くなり、スクロールしないと見えなくなってしまった場合に、フッターが表示されなくなってしまいます。
解決方法を教えて下さい。
追記です。CSSの提示が必要というコメントがありましたので、CSSの提示を行います。
CSS
1#wrapper{ 2 width: 1280px; 3 margin: 0 auto; 4 /* ヘッダーの高さ調節 */ 5 padding-top: 105px; 6} 7 8#main{ 9 /* mainを左に寄せる */ 10 float: left; 11 background: #fff; 12 width: 900px; 13 margin: 5; 14} 15#said{ 16 /* saidを右に寄せる */ 17 float: left; 18 width: 300px; 19 margin: 5; 20 21 height: 80px; 22} 23#footer{ 24 /* footerをfloatから除外する */ 25 clear: both; 26 height: 30px; 27}
footerの呼び出しコードです。
html
1<div id="footer" class="comon"> 2 <!-- フッターを呼び出し --> 3 <iframe id="footer" class="common" src="../../footer/footer.html" frameborder="no"></iframe> 4 </div>
回答4件
0
HTML構造の方をかなり省略しているような気がしますが、
要するにこういう構造になっているということで良いですか？
HTML
1<body> 2<iframe id="header" class="common" src="header.html" frameborder="no"></iframe> 3<div id="wrapper"> 4 <div id="main"> 5このページのコンテンツが入る領域<br> 6<br><br><br><br><br><br><br><br><br> 7<br><br><br><br><br><br><br><br><br> 8<br><br><br><br><br><br><br><br><br> 9<br><br><br><br><br><br><br><br><br> 10<br><br><br><br><br><br><br><br><br> 11 </div> 12 <iframe id="side" src="side.html" frameborder="no"></iframe> 13</div> 14<iframe id="footer" src="footer.html" frameborder="no"></iframe> 15</body>
仮に上記の構造になっていて、CSSの方も記載されたもの以外に余計なスタイルを指定していないのだとしたら、
「フッターが表示されない」という現象は起こる余地がありません。（上記HTML構造に、質問者さんが記載したCSSを当てて試してみましたが、スクロールすれば一番に下にフッターは存在しています）
なので、記載していない情報がまだあって、そちらに原因があるのではないかと推測します。
HTMLもCSSも 「ここは必要ないだろう」 と思って省略したところに実は原因があった、
ということは良くある話ですので、あまり省略せずに正確に該当部分のコードを掲示してみてはいかがでしょうか。
もう一つ可能性として考えられるのは、「フッターが表示されない」と言っている状態が、
文字通り「表示されない」ことを指しているのではなく、「（常に画面内にいてほしいのに）画面上から見えなくなってしまう」ということを指しているケースでしょうか。
もしそういうことなのであれば、コンテンツ分量が増えてスクロールが必要な状態になった時、
メインのコンテンツ領域の下に配置されているフッターが押し出されて画面外に行ってしまうのは
当たり前の現象なので、問題でもなんでもありません。
なので、この場合は「メインのコンテンツ量が増えても常に画面の一番下にフッターを表示しておくにはどうしたらいいか？」というのが正しい質問の仕方、ということになりますね。
現状では提示されたコードと質問文から何が問題なのか？を推測することしかできませんので、
回答になっていないかもしれませんが私からは以上です。。。。
投稿2016/10/02 10:42
総合スコア3763
なるほどですね。
あっ上のHTMLソースコード完璧に合ってます。サイド確認してみます。
フッター呼び出しソースを追記させてもらったんですが、これで呼ばれる所は呼ばれており、呼ばれない所は呼ばれないんです。
>>これで呼ばれる所は呼ばれており、呼ばれない所は呼ばれないんです。
えーと、それはもしかしてCSSの問題ではなく、iframeからのfooter.html呼び出しのパスが間違っているということなのでは・・・・？
フッターが呼び出されるページと呼び出されないページで、階層が違うとかいうことありませんか？
パスが間違っているということはありません。
一度スクロースせずに見れる範囲までコードを削って見たら、一番下に表示しました。
そうですか。そうなるともう、実際のページをどこか外部から見れる場所にUPしてもらって直接本物のデータを調査しないとわからないですねー。多分、他のところに書いたCSSとか、あるいは構文エラー等が影響しているのではないかと思われますが。。。
ちなみに同じid属性を複数箇所に書いたりする等、HTML側に文法違反がいくつかありそうなので、念のため文法チェックをかけてエラーがあったら修正してみてからCSSの調査に入ったほうがいいと思います。
自己解決することが出来ました。
外部にアップできるといいのですが、FC2はページごとに広告が入るため、形が崩れてしまいUPすることが出来ません。
サーバーを作りたいのですが、高校１年という事もあり、毎月のお小遣いではまだまだ、実現するのが難しいこともあります。
やはり他のCSSが影響していましたか。
ともかく解決できてよかったですね(^_^)
ありがとうございました。
0
自己解決
解決することが出来ました。
CSSのposition:fixed;が邪魔をしていたみたいです。
回答いただいた方ありがとうございました。
投稿2016/10/02 12:47
総合スコア437
0
floatの解除がうまくいっていない感じですかね。
これの追加でどうでしょう？
css
1#wrapper:after { 2 content:""; 3 display:block; 4 clear:both; 5}
補足：id名はhtmlではなくcssの方に合わせてあります。
投稿2016/10/02 04:52
編集2016/10/02 04:54総合スコア2722
0
id="Whopper" の div 要素に height と overflow を指定した css を適用するというのはいかがですか？ 具体的に以下の記事を見てください。
ボックスからはみ出た部分の表示方法を指定する
http://www.tagindex.com/stylesheet/box/overflow.html
投稿2016/10/02 04:07
退会済みユーザー
総合スコア0
ボックスからはみ出たというわけでは無いと思います。
紹介した記事の中身は読みましたか？
id="Whopper" と #wrapper どっちが正しのでしょう？
footerはWhopperの外にあるんです。なので、今回ははみ出た場合ではないと思ったのですが、間違ってますか？
単純に <div id="Whopper"> の高さを固定し、さらに overflow を使って、「ページファイルという所が長く」なったら <div id="Whopper"> の中でスクロールするというのはいかがですかと聞いたのです。そうではなくて、この teratail のページの左横のツイッターや facebook マークのように位置を固定したいということですか？
ところで、id="Whopper" と #wrapper どっちが正しのでしょう？・・・と質問した意味はお分かりでしょうか？
Whopperの高さを固定してしまうと、更新した時にわざわざ高さを帰る必要性が出てきますよね？
固定せずに、ページ終わりに表示する方法は無いですか？
あなたの回答
tips
プレビュー
