質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.70%

フッターの表示が上手く出来ない

解決済

回答 4

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 4,605

ryohasegawa

score 119

イメージ説明
画像の様にページを組んであるんですが、このページファイルとsaid.htmlをWhopperで囲んであり、その下にfooterを持って来ています。

<html>
    <body>
        「header.html」の呼び出し。
     <div id="Whopper">
             このページファイル
       said.html呼び出し
         </div>
         header.htmlの呼び出し
    </body>
</html>


こういう設計にしたんですが、このページファイルという所が長くなり、スクロールしないと見えなくなってしまった場合に、フッターが表示されなくなってしまいます。
解決方法を教えて下さい。

追記です。CSSの提示が必要というコメントがありましたので、CSSの提示を行います。

#wrapper{
    width: 1280px;
    margin: 0 auto;
    /* ヘッダーの高さ調節 */
    padding-top: 105px;
}

#main{
    /* mainを左に寄せる */
    float: left;
    background: #fff;
    width: 900px;
    margin: 5;
}
#said{
    /* saidを右に寄せる */
    float: left;
    width: 300px;
    margin: 5;

    height: 80px;
}
#footer{
    /* footerをfloatから除外する */
   clear: both;
   height: 30px;
}

footerの呼び出しコードです。

<div id="footer" class="comon">
            <!-- フッターを呼び出し -->
            <iframe id="footer" class="common" src="../../footer/footer.html" frameborder="no"></iframe>
        </div>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • gin

    2016/10/02 13:08

    cssの問題かと思いますので、cssの掲載お願いします。

    キャンセル

  • ryohasegawa

    2016/10/02 13:41

    CSSの追記を行いました。

    キャンセル

  • aKusano

    2016/10/02 14:18

    header、footer、main、sideの各コンテンツは別のhtmlファイルを何らかの方法でインクルードしている状態でしょうか? もしそうならインクルードの手法はどのようなものですか?(PHP, SSI, JavaScriptなど)

    キャンセル

  • ryohasegawa

    2016/10/02 19:06

    <iframe id="header" class="common" src="../../header/header.html" frameborder="no"></iframe>このように呼び出しているだけです。

    キャンセル

回答 4

+1

HTML構造の方をかなり省略しているような気がしますが、
要するにこういう構造になっているということで良いですか?

<body>
<iframe id="header" class="common" src="header.html" frameborder="no"></iframe>
<div id="wrapper">
    <div id="main">
このページのコンテンツが入る領域<br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
    </div>
    <iframe id="side" src="side.html" frameborder="no"></iframe>
</div>
<iframe id="footer" src="footer.html" frameborder="no"></iframe>
</body>

仮に上記の構造になっていて、CSSの方も記載されたもの以外に余計なスタイルを指定していないのだとしたら、
「フッターが表示されない」という現象は起こる余地がありません。(上記HTML構造に、質問者さんが記載したCSSを当てて試してみましたが、スクロールすれば一番に下にフッターは存在しています)

なので、記載していない情報がまだあって、そちらに原因があるのではないかと推測します。
HTMLもCSSも 「ここは必要ないだろう」 と思って省略したところに実は原因があった、
ということは良くある話ですので、あまり省略せずに正確に該当部分のコードを掲示してみてはいかがでしょうか。

もう一つ可能性として考えられるのは、「フッターが表示されない」と言っている状態が、
文字通り「表示されない」ことを指しているのではなく、「(常に画面内にいてほしいのに)画面上から見えなくなってしまう」ということを指しているケースでしょうか。

もしそういうことなのであれば、コンテンツ分量が増えてスクロールが必要な状態になった時、
メインのコンテンツ領域の下に配置されているフッターが押し出されて画面外に行ってしまうのは
当たり前の現象なので、問題でもなんでもありません。
なので、この場合は「メインのコンテンツ量が増えても常に画面の一番下にフッターを表示しておくにはどうしたらいいか?」というのが正しい質問の仕方、ということになりますね。

現状では提示されたコードと質問文から何が問題なのか?を推測することしかできませんので、
回答になっていないかもしれませんが私からは以上です。。。。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/10/02 21:49

    自己解決することが出来ました。
    外部にアップできるといいのですが、FC2はページごとに広告が入るため、形が崩れてしまいUPすることが出来ません。
    サーバーを作りたいのですが、高校1年という事もあり、毎月のお小遣いではまだまだ、実現するのが難しいこともあります。

    キャンセル

  • 2016/10/02 21:56

    やはり他のCSSが影響していましたか。
    ともかく解決できてよかったですね(^_^)

    キャンセル

  • 2016/10/03 00:16

    ありがとうございました。

    キャンセル

0

id="Whopper" の div 要素に height と overflow を指定した css を適用するというのはいかがですか? 具体的に以下の記事を見てください。

ボックスからはみ出た部分の表示方法を指定する
http://www.tagindex.com/stylesheet/box/overflow.html

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/10/02 14:05

    footerはWhopperの外にあるんです。なので、今回ははみ出た場合ではないと思ったのですが、間違ってますか?

    キャンセル

  • 2016/10/02 14:17

    単純に <div id="Whopper"> の高さを固定し、さらに overflow を使って、「ページファイルという所が長く」なったら <div id="Whopper"> の中でスクロールするというのはいかがですかと聞いたのです。そうではなくて、この teratail のページの左横のツイッターや facebook マークのように位置を固定したいということですか?

    ところで、id="Whopper" と #wrapper どっちが正しのでしょう?・・・と質問した意味はお分かりでしょうか?

    キャンセル

  • 2016/10/02 20:21

    Whopperの高さを固定してしまうと、更新した時にわざわざ高さを帰る必要性が出てきますよね?
    固定せずに、ページ終わりに表示する方法は無いですか?

    キャンセル

0

floatの解除がうまくいっていない感じですかね。
これの追加でどうでしょう?

#wrapper:after {
    content:"";
    display:block;
    clear:both;
}


補足:id名はhtmlではなくcssの方に合わせてあります。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/10/02 20:20

    footerのCSSの設定ではなく、Whopperの方の設定ですか?

    キャンセル

  • 2016/10/02 20:56

    #mainと#saidをかこっているdivです。
    htmlのとおりid="Whopper"が正しいのであれば「#Whopper:after」で。

    キャンセル

check解決した方法

-2

解決することが出来ました。
CSSのposition:fixed;が邪魔をしていたみたいです。
回答いただいた方ありがとうございました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.70%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る