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

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

ただいまの
回答率

90.60%

  • PHP

    19858questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • HTML

    8681questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    5589questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

フッター下の余白を消したい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 207

science_mac

score 21

いつもお世話になっております。
以前に似たような質問をしたのですが、違うページにて問題を解決できなかったため改めて質問させていただきました。

サイトのフッター下に微妙な余白ができており、そこを詰めてフッターを表示するようにしたいのですが、どうもうまくできません。
何が原因になっているかを知りたいため、もしピンと来るものがあったら教えていただけないでしょうか。

※ブラウザのソース表示のものを貼っているため不恰好になってしまっています。
申し訳ありません。

<div class="search_result">
  <br>
  <div class="result_phrase">  
  </div>
  <br>
  <br>
  <a href="recipe-detail?recipe_id=RC081517508091_001">
    <div id="search_result_block1">
      <div class="img">
        <img src=http://vccw.test/wp-content/themes/lightning-child/images/test/RC081517508091_001.jpg>
      </div>
      <div id="search_result_block2" align="left">
        <p>テスト</p>
        <p class="p3"><span class="p4">テスト</span>テスト</p>
      </div>
      <br>
      <div id="search_result_block3" align="left">
        <p>テスト</p>
      </div>
    </a>
  </div>
  <br>
</div>

    <nav id ="page_link">

      1
      <a href=?type=genre&amp;page_no=2&amp;genre=RICE class="home"><span>2</span></a>
      <a href=?type=genre&amp;page_no=3&amp;genre=RICE class="home"><span>3</span></a>
      &nbsp;&nbsp;<a href=?type=genre&amp;page_no=2&amp;genre=RICE class="home"><span>次のページ→</span></a></nav>


      <footer class="section siteFooter">
        <div class="footerMenu">
          <div class="container">
          </div>
        </div>
        <div class="container sectionBox">
          <div class="row ">
            <div class="col-md-4"><aside class="widget widget_text" id="text-7">            <div class="textwidget"><p><a href="http://www.materic.jp/terms_of_service/">利用規約</a><br />
              <a href="http://www.test/">お問い合わせ</a></p>
            </div>
          </aside></div><div class="col-md-4"></div><div class="col-md-4"></div>        </div>
        </div>
      </footer>
      <div id="fb-root"></div>
html {
    height: 100%;
}

body {
    height: 100vh;
  display: flex;
  flex-direction: column;
    background-color: #ffffe1;
}

div.search_result {
    text-align: center;
    flex: 1;
}

div.search_result h1 {
    font-size: 1.2em;
    margin : 100px 0px -45px 0px;
}

div.search_result a {
    text-decoration: none;
    color : #000000;
}

div.result_phrase {
    font-size: 1.5em;
    margin-top : 20px;
    margin-bottom: -30px;
}

#search_result_block1 {
    margin: 0 auto;
    background: white;
    border-style : solid;
    border-width : 1px;
    width : 600px;
    height : 200px;
    border-color : gray;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;

}

#search_result_block2 {
    margin-top : 10px;
    margin-left : 200px;
    background : #fff9fc;
    border-style : solid;
    border-width : 1px;
    width : 388px;
    font-size : 20px;
    height : 110px;
    border-color : gray;
}

#search_result_block2 p {
    color: #9cbb1c;
    font-size: 1.4em;
    margin-left: 3px;
    margin-bottom : 0px;
    text-decoration: underline;
    font-weight:bold;
}

#search_result_block2 .p1 {
    color: #9cbb1c;
    font-size: 1.2em;
    margin-left: 3px;
    margin-bottom : 0px;
    text-decoration: underline;
    font-weight:bold;
}

#search_result_block2 .p2 {
    color: #9cbb1c;
    font-size: 0.9em;
    margin-left: 3px;
    margin-bottom : 0px;
    text-decoration: underline;
    font-weight:bold;
}

#search_result_block2 .p3 {
    font-size: 0.8em;
    margin-left: 3px;
    margin-top : 0px;
    color: #ff7f50;
    text-decoration: none;
    font-weight:bold;
}

#search_result_block2 .p4 {
    font-size: 1.0em;
    margin-top : 0px;
    color: gray;
    text-decoration: none;
    font-weight:bold;
}

#search_result_block3 {
    margin-bottom : 10px;
    margin-left : 200px;
    margin-top : -15px;
    background :#fff9fc;
    border-style :solid;
    border-width : 1px;
    width :388px;
    height : 63px;
    border-color :gray;
}
#search_result_block3 p {
    margin-left: 3px;
    font-size : 10px;
}

.section.siteFooter{
    background:white;
    color:#ffffff;
}

別のページにて解決できた時には、コンテンツ全体を囲むdivに対してflex: 1 0 auto;を設定することで対応できました。
しかし、今回提示したPHPについてdivで全体を囲って同じ指定をしても余白が消えることはありませんでした...

わかりづらい質問となってしまい大変申し訳ありませんが、どうかよろしくお願いします。

  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+2

ユーザーエージェントスタイルシートというブラウザが各要素に設定しているスタイルが原因です。この問題を解決するには、該当要素(今回はbody要素)に設定されているスタイル(今回はmargin)を上書きする必要があります。 

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>タイトル</title>
    <style>
        html {
            height: 100%;
        }

        body {
            height: 100vh;
            display: flex;
            flex-direction: column;
            background-color: #ffffe1;
            margin: 0; /* 追記 */
        }

        div.search_result {
            text-align: center;
            flex: 1;
        }

        div.search_result h1 {
            font-size: 1.2em;
            margin: 100px 0px -45px 0px;
        }

        div.search_result a {
            text-decoration: none;
            color: #000000;
        }

        div.result_phrase {
            font-size: 1.5em;
            margin-top: 20px;
            margin-bottom: -30px;
        }

        #search_result_block1 {
            margin: 0 auto;
            background: white;
            border-style: solid;
            border-width: 1px;
            width: 600px;
            height: 200px;
            border-color: gray;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border-radius: 5px;

        }

        #search_result_block2 {
            margin-top: 10px;
            margin-left: 200px;
            background: #fff9fc;
            border-style: solid;
            border-width: 1px;
            width: 388px;
            font-size: 20px;
            height: 110px;
            border-color: gray;
        }

        #search_result_block2 p {
            color: #9cbb1c;
            font-size: 1.4em;
            margin-left: 3px;
            margin-bottom: 0px;
            text-decoration: underline;
            font-weight: bold;
        }

        #search_result_block2 .p1 {
            color: #9cbb1c;
            font-size: 1.2em;
            margin-left: 3px;
            margin-bottom: 0px;
            text-decoration: underline;
            font-weight: bold;
        }

        #search_result_block2 .p2 {
            color: #9cbb1c;
            font-size: 0.9em;
            margin-left: 3px;
            margin-bottom: 0px;
            text-decoration: underline;
            font-weight: bold;
        }

        #search_result_block2 .p3 {
            font-size: 0.8em;
            margin-left: 3px;
            margin-top: 0px;
            color: #ff7f50;
            text-decoration: none;
            font-weight: bold;
        }

        #search_result_block2 .p4 {
            font-size: 1.0em;
            margin-top: 0px;
            color: gray;
            text-decoration: none;
            font-weight: bold;
        }

        #search_result_block3 {
            margin-bottom: 10px;
            margin-left: 200px;
            margin-top: -15px;
            background: #fff9fc;
            border-style: solid;
            border-width: 1px;
            width: 388px;
            height: 63px;
            border-color: gray;
        }

        #search_result_block3 p {
            margin-left: 3px;
            font-size: 10px;
        }

        .section.siteFooter {
            background: white;
            color: #ffffff;
        }
    </style>
</head>
<body>
<div class="search_result">
    <br>
    <div class="result_phrase">
    </div>
    <br>
    <br>
    <a href="recipe-detail?recipe_id=RC081517508091_001">
        <div id="search_result_block1">
            <div class="img">
                <img src=http://vccw.test/wp-content/themes/lightning-child/images/test/RC081517508091_001.jpg>
            </div>
            <div id="search_result_block2" align="left">
                <p>テスト</p>
                <p class="p3"><span class="p4">テスト</span>テスト</p>
            </div>
            <br>
            <div id="search_result_block3" align="left">
                <p>テスト</p>
            </div>
        </div><!-- divの終了タグを追記 -->
    </a>
</div>
<br>

<nav id="page_link">

    1
    <a href=?type=genre&amp;page_no=2&amp;genre=RICE class="home"><span>2</span></a>
    <a href=?type=genre&amp;page_no=3&amp;genre=RICE class="home"><span>3</span></a>
    &nbsp;&nbsp;<a href=?type=genre&amp;page_no=2&amp;genre=RICE class="home"><span>次のページ→</span></a></nav>


<footer class="section siteFooter">
    <div class="footerMenu">
        <div class="container">
        </div>
    </div>
    <div class="container sectionBox">
        <div class="row ">
            <div class="col-md-4">
                <aside class="widget widget_text" id="text-7">
                    <div class="textwidget"><p><a href="http://www.materic.jp/terms_of_service/">利用規約</a><br/>
                        <a href="http://www.test/">お問い合わせ</a></p>
                    </div>
                </aside>
            </div>
            <div class="col-md-4"></div>
            <div class="col-md-4"></div>
        </div>
    </div>
</footer>
<div id="fb-root"></div>
</body>
</html>

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/05/24 17:03

    ユーザーエージェントスタイルシートについては知識がありませんでした。
    参考にさせていただきます。
    また、少しソースの記述にミスがありました。
    </div>が一つ足りなかったようです...申し訳ありません。(指摘で追加してくださってくれてありがとうございます)

    指摘について取り込んでみたのですが、特に現状から変わることはありませんでした...
    chromeのデベロッパーツールにて確認してみたのですが、ユーザーエージェントスタイルシート部分については取り消し戦が掛かっていたため、今回のはユーザーエージェントスタイルシートが原因では無い...ということでしょうか?

    質問ばかりになってしまい、申し訳ありません。

    キャンセル

  • 2018/05/24 17:11

    > 指摘について取り込んでみたのですが、特に現状から変わることはありませんでした...
    私の回答に記述されているソースコードを実行したとき、フッター下に出来る余白が消えることを確認できますか?また、ブラウザのキャッシュを消去(https://helpx.adobe.com/jp/legacy/kb/222659.html)した上でソースコードを実行した場合にも問題は解決しませんか?

    > ユーザーエージェントスタイルシート部分については取り消し戦が掛かっていたため
    質問文に記述していないCSSはありませんか?もし質問文に載せていないCSSがあるのであれば、そのCSSがユーザーエージェントスタイルシートの設定を上書きした上で何か悪さをしている可能性があります。

    キャンセル

  • 2018/05/24 17:29

    ご回答のソースをそのまま実行したところ、確かに余白が消えていることを確認できました。
    確認の際は、毎度ブラウザのキャッシュは削除しております。

    >質問文に記述していないCSSはありませんか?もし質問文に載せていないCSSがあるのであれば、そのCSSがユーザーエージェントスタイルシートの設定を上書きした上で何か悪さをしている可能性があります。

    今回の対象ページについては載せたCSSが全てになります。
    あとは全ページ共通のヘッダー部分についてのCSSとなりますが、こちらが影響を与えている可能性があるということでしょうか...?

    キャンセル

  • 2018/05/24 17:43 編集

    > 全ページ共通のヘッダー部分についてのCSSとなりますが、こちらが影響を与えている可能性があるということでしょうか...?
    私の回答文に記述されているソースコードで余白が消えていることを確認できたのであれば、その可能性が高いです。

    キャンセル

  • 2018/05/28 15:53

    返信できておらず、大変申し訳ありませんでした。
    指摘いただいた通り、ヘッダー部分のcssを見直したところ余白を消すことができました。

    色々とご指摘いただきありがとうございました。

    キャンセル

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

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

関連した質問

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

  • PHP

    19858questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • HTML

    8681questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    5589questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。