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

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

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

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

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

CSS
1html {
2	height: 100%;
3}
4
5body {
6	height: 100vh;
7  display: flex;
8  flex-direction: column;
9	background-color: #ffffe1;
10}
11
12div.search_result {
13	text-align: center;
14	flex: 1;
15}
16
17div.search_result h1 {
18	font-size: 1.2em;
19	margin : 100px 0px -45px 0px;
20}
21
22div.search_result a {
23	text-decoration: none;
24	color : #000000;
25}
26
27div.result_phrase {
28	font-size: 1.5em;
29	margin-top : 20px;
30	margin-bottom: -30px;
31}
32
33#search_result_block1 {
34	margin: 0 auto;
35	background: white;
36	border-style : solid;
37	border-width : 1px;
38	width : 600px;
39	height : 200px;
40	border-color : gray;
41	-moz-border-radius: 5px;
42	-webkit-border-radius: 5px;
43	border-radius: 5px;
44
45}
46
47#search_result_block2 {
48	margin-top : 10px;
49	margin-left : 200px;
50	background : #fff9fc;
51	border-style : solid;
52	border-width : 1px;
53	width : 388px;
54	font-size : 20px;
55	height : 110px;
56	border-color : gray;
57}
58
59#search_result_block2 p {
60	color: #9cbb1c;
61	font-size: 1.4em;
62	margin-left: 3px;
63	margin-bottom : 0px;
64	text-decoration: underline;
65	font-weight:bold;
66}
67
68#search_result_block2 .p1 {
69	color: #9cbb1c;
70	font-size: 1.2em;
71	margin-left: 3px;
72	margin-bottom : 0px;
73	text-decoration: underline;
74	font-weight:bold;
75}
76
77#search_result_block2 .p2 {
78	color: #9cbb1c;
79	font-size: 0.9em;
80	margin-left: 3px;
81	margin-bottom : 0px;
82	text-decoration: underline;
83	font-weight:bold;
84}
85
86#search_result_block2 .p3 {
87	font-size: 0.8em;
88	margin-left: 3px;
89	margin-top : 0px;
90	color: #ff7f50;
91	text-decoration: none;
92	font-weight:bold;
93}
94
95#search_result_block2 .p4 {
96	font-size: 1.0em;
97	margin-top : 0px;
98	color: gray;
99	text-decoration: none;
100	font-weight:bold;
101}
102
103#search_result_block3 {
104	margin-bottom : 10px;
105	margin-left : 200px;
106	margin-top : -15px;
107	background :#fff9fc;
108	border-style :solid;
109	border-width : 1px;
110	width :388px;
111	height : 63px;
112	border-color :gray;
113}
114#search_result_block3 p {
115	margin-left: 3px;
116	font-size : 10px;
117}
118
119.section.siteFooter{
120	background:white;
121	color:#ffffff;
122}

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

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

行動規範の内容に同意します

回答1件

ベストアンサー

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

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style>
7        html {
8            height: 100%;
9        }
10
11        body {
12            height: 100vh;
13            display: flex;
14            flex-direction: column;
15            background-color: #ffffe1;
16            margin: 0; /* 追記 */
17        }
18
19        div.search_result {
20            text-align: center;
21            flex: 1;
22        }
23
24        div.search_result h1 {
25            font-size: 1.2em;
26            margin: 100px 0px -45px 0px;
27        }
28
29        div.search_result a {
30            text-decoration: none;
31            color: #000000;
32        }
33
34        div.result_phrase {
35            font-size: 1.5em;
36            margin-top: 20px;
37            margin-bottom: -30px;
38        }
39
40        #search_result_block1 {
41            margin: 0 auto;
42            background: white;
43            border-style: solid;
44            border-width: 1px;
45            width: 600px;
46            height: 200px;
47            border-color: gray;
48            -moz-border-radius: 5px;
49            -webkit-border-radius: 5px;
50            border-radius: 5px;
51
52        }
53
54        #search_result_block2 {
55            margin-top: 10px;
56            margin-left: 200px;
57            background: #fff9fc;
58            border-style: solid;
59            border-width: 1px;
60            width: 388px;
61            font-size: 20px;
62            height: 110px;
63            border-color: gray;
64        }
65
66        #search_result_block2 p {
67            color: #9cbb1c;
68            font-size: 1.4em;
69            margin-left: 3px;
70            margin-bottom: 0px;
71            text-decoration: underline;
72            font-weight: bold;
73        }
74
75        #search_result_block2 .p1 {
76            color: #9cbb1c;
77            font-size: 1.2em;
78            margin-left: 3px;
79            margin-bottom: 0px;
80            text-decoration: underline;
81            font-weight: bold;
82        }
83
84        #search_result_block2 .p2 {
85            color: #9cbb1c;
86            font-size: 0.9em;
87            margin-left: 3px;
88            margin-bottom: 0px;
89            text-decoration: underline;
90            font-weight: bold;
91        }
92
93        #search_result_block2 .p3 {
94            font-size: 0.8em;
95            margin-left: 3px;
96            margin-top: 0px;
97            color: #ff7f50;
98            text-decoration: none;
99            font-weight: bold;
100        }
101
102        #search_result_block2 .p4 {
103            font-size: 1.0em;
104            margin-top: 0px;
105            color: gray;
106            text-decoration: none;
107            font-weight: bold;
108        }
109
110        #search_result_block3 {
111            margin-bottom: 10px;
112            margin-left: 200px;
113            margin-top: -15px;
114            background: #fff9fc;
115            border-style: solid;
116            border-width: 1px;
117            width: 388px;
118            height: 63px;
119            border-color: gray;
120        }
121
122        #search_result_block3 p {
123            margin-left: 3px;
124            font-size: 10px;
125        }
126
127        .section.siteFooter {
128            background: white;
129            color: #ffffff;
130        }
131    </style>
132</head>
133<body>
134<div class="search_result">
135    <br>
136    <div class="result_phrase">
137    </div>
138    <br>
139    <br>
140    <a href="recipe-detail?recipe_id=RC081517508091_001">
141        <div id="search_result_block1">
142            <div class="img">
143                <img src=http://vccw.test/wp-content/themes/lightning-child/images/test/RC081517508091_001.jpg>
144            </div>
145            <div id="search_result_block2" align="left">
146                <p>テスト</p>
147                <p class="p3"><span class="p4">テスト</span>テスト</p>
148            </div>
149            <br>
150            <div id="search_result_block3" align="left">
151                <p>テスト</p>
152            </div>
153        </div><!-- divの終了タグを追記 -->
154    </a>
155</div>
156<br>
157
158<nav id="page_link">
159
160    1
161    <a href=?type=genre&amp;page_no=2&amp;genre=RICE class="home"><span>2</span></a>
162    <a href=?type=genre&amp;page_no=3&amp;genre=RICE class="home"><span>3</span></a>
163    &nbsp;&nbsp;<a href=?type=genre&amp;page_no=2&amp;genre=RICE class="home"><span>次のページ→</span></a></nav>
164
165
166<footer class="section siteFooter">
167    <div class="footerMenu">
168        <div class="container">
169        </div>
170    </div>
171    <div class="container sectionBox">
172        <div class="row ">
173            <div class="col-md-4">
174                <aside class="widget widget_text" id="text-7">
175                    <div class="textwidget"><p><a href="http://www.materic.jp/terms_of_service/">利用規約</a><br/>
176                        <a href="http://www.test/">お問い合わせ</a></p>
177                    </div>
178                </aside>
179            </div>
180            <div class="col-md-4"></div>
181            <div class="col-md-4"></div>
182        </div>
183    </div>
184</footer>
185<div id="fb-root"></div>
186</body>
187</html>

投稿2018/05/24 07:43

s8_chu

総合スコア14731

science_mac

2018/05/24 08:03

ユーザーエージェントスタイルシートについては知識がありませんでした。参考にさせていただきます。また、少しソースの記述にミスがありました。 </div>が一つ足りなかったようです...申し訳ありません。（指摘で追加してくださってくれてありがとうございます）指摘について取り込んでみたのですが、特に現状から変わることはありませんでした... chromeのデベロッパーツールにて確認してみたのですが、ユーザーエージェントスタイルシート部分については取り消し戦が掛かっていたため、今回のはユーザーエージェントスタイルシートが原因では無い...ということでしょうか？質問ばかりになってしまい、申し訳ありません。

s8_chu

2018/05/24 08:11

> 指摘について取り込んでみたのですが、特に現状から変わることはありませんでした... 私の回答に記述されているソースコードを実行したとき、フッター下に出来る余白が消えることを確認できますか？また、ブラウザのキャッシュを消去(https://helpx.adobe.com/jp/legacy/kb/222659.html)した上でソースコードを実行した場合にも問題は解決しませんか？ > ユーザーエージェントスタイルシート部分については取り消し戦が掛かっていたため質問文に記述していないCSSはありませんか？もし質問文に載せていないCSSがあるのであれば、そのCSSがユーザーエージェントスタイルシートの設定を上書きした上で何か悪さをしている可能性があります。

science_mac

2018/05/24 08:29

ご回答のソースをそのまま実行したところ、確かに余白が消えていることを確認できました。確認の際は、毎度ブラウザのキャッシュは削除しております。 >質問文に記述していないCSSはありませんか？もし質問文に載せていないCSSがあるのであれば、そのCSSがユーザーエージェントスタイルシートの設定を上書きした上で何か悪さをしている可能性があります。今回の対象ページについては載せたCSSが全てになります。あとは全ページ共通のヘッダー部分についてのCSSとなりますが、こちらが影響を与えている可能性があるということでしょうか...？

s8_chu

2018/05/24 08:43 編集

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

science_mac

2018/05/28 06:53

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

行動規範の内容に同意します