HTML5,wordpressでのレスポンシブ対応時の縦余白について

プログラミング初心者です。
HTML5を使いwordpressでレスポンシブ対応のサイトを作っております。
ブレイクポイントは960pxのみです。
トップページの画像は縦横比を変えずに縮小できているのですが、
縮小すると下に余白が生まれてしまいフッターとの間に余白ができてしまいます。

960px以下に縮小しても、main下部に余白を作らずfooterを追従させるにはどうしたらよいのでしょうか？

<div id="container">または<div id="wrap">もレスポンシブをする必要があるのか？と予想しておりますが、そうだった場合もどうすればよいのかわかりません。

初歩的な質問で申し訳ありませんが
どなたかご教示願います。
よろしくお願いいたします。

HTML5
1<!DOCTYPE HTML>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>YUKI MURASE</title>
6<meta name="viewport" content="width=device-width,initial-scale=1.0">
7
8<link href="css/reset.css" rel="stylesheet" type="text/css">
9<link href="style.css" rel="stylesheet" type="text/css">
10<link href="css/drawer.min.css" rel="stylesheet" type="text/css">
11
12</head>
13
14<body class="drawer drawer--right">
15
16<div id="wrap">
17
18<!--header-->
19<header>
20<div id="title">
21<a href="index.html">
22 <p class="title">YUKI MURASE</p></a>
23</div>
24
25<button type="button" class="drawer-toggle drawer-hamburger">
26    <span class="sr-only">toggle navigation</span>
27    <span class="drawer-hamburger-icon"></span>
28</button>
29
30<nav id="gnav">
31<ul>
32<li><a href="news.html">NEWS</a></li>
33<li><a href="profile.html">PROFILE</a></li>
34<li><a href="photography.html">PHOTOGRAPHY</a></li>
35<li><a href="video.html">VIDEO</a></li>
36<li><a href="instagram.html">INSTAGRAM</a></li>
37<li><a href="https://minne.com/@gumiichoco" target="_blank">SHOP</a></li>
38<li><a href="contact.html">CONTACT</a></li>
39</ul>
40</nav>
41
42<nav class="drawer-nav">
43    <ul class="drawer-menu">
44      <li><a href="news.html">NEWS</a></li>
45      <li><a href="profile.html">PROFILE</a></li>
46      <li><a href="photography.html">PHOTOGRAPHY</a></li>
47      <li><a href="video.html">VIDEO</a></li>
48      <li><a href="instagram.html">INSTAGRAM</a></li>
49      <li><a href="https://minne.com/@gumiichoco" target="_blank">SHOP</a></li>
50      <li><a href="contact.html">CONTACT</a></li>
51    </ul>
52</nav>
53</header>
54
55<!--container-->
56<div id="container">
57 <div id="slideshow">
58 <img src="images/slideshow1.jpg" width="750" height="510" alt="pic1" class="active">
59 <img src="images/slideshow2.jpg" width="750" height="510" alt="pic2">
60 <img src="images/slideshow3.jpg" width="750" height="510" alt="pic3">
61 </div>
62</div>
63
64<!--wrap end-->
65</div>
66
67<!--footer-->
68<footer>
69<div class="copyright">
70<p>&copy; 2018 YUKI MURASE All Rights Reserved.</p>
71</div>
72</footer>
73
74</body>
75</html>
76

CSS
1@charset "UTF-8";
2/* CSS Document */
3
4html{
5overflow:auto;
6height:100%;
7}
8
9h1{
10font-size:30px;
11color:#900;
12}
13
14body{
15max-width:1080px;
16min-height:90%;
17display:grid;
18grid-template-rows:1fr auto;
19margin:0 auto;
20position:relative;
21font-family: 'Avenir Next','Consolas','TsukuARdGothic-Regular','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',YuGothic,'Yu Gothic',sans-serif;
22font-weight:normal;
23animation: fadeIn 1s ease 0s 1 normal;
24-webkit-animation: fadeIn 2s ease 0s 1 normal;
25}
26
27@keyframes fadeIn {
28    0% {opacity: 0}
29    100% {opacity: 1}
30}
31
32@-webkit-keyframes fadeIn {
33    0% {opacity: 0}
34    100% {opacity: 1}
35}
36
37div#wrap{
38width:69.4%;
39margin:0 auto;
40overflow:hidden;
41display: flex;
42flex-direction: column;
43}
44
45/* header */
46header{
47width:100%;
48height:60px;
49margin-top:55px;
50display:block;
51}
52
53div#title{
54width:19.8%;
55height:70px;
56float:left;
57}
58
59div#title a{
60font-size:18px;
61font-weight:200;
62letter-spacing:3px;
63text-decoration:none;
64}
65
66/* pc nav */
67@media screen and (min-width: 960px){
68nav#gnav{
69height:70px;
70float:right;
71}
72
73nav#gnav ul{
74list-style:none;
75}
76
77
78nav#gnav li{
79float:left;
80margin-left:12px;
81}
82
83nav#gnav li.underline{
84border-bottom:dotted 1px #828486;
85}
86
87nav#gnav span{
88font-size:11px;
89font-weight:200;
90letter-spacing:3px;
91text-decoration:none;
92color:#000;
93position: relative;
94display: inline-block;
95padding-bottom:3px;
96}
97
98nav#gnav a{
99font-size:11px;
100font-weight:200;
101letter-spacing:3px;
102text-decoration:none;
103color:#000;
104position: relative;
105display: inline-block;
106transition: .3s;
107padding-bottom:3px;
108}
109
110nav#gnav a::after {
111position: absolute;
112bottom: 0;
113left: 50%;
114content: '';
115width: 0;
116height: 1px;
117background-color: #f5d865;
118transition: .3s;
119-webkit-transform: translateX(-50%);
120transform: translateX(-50%);
121}
122
123nav#gnav a:hover::after {
124width: 100%;
125}
126
127button.drawer-toggle{
128display:none;
129}
130
131nav.drawer-nav{
132display:none;
133}
134}
135
136/* smartphone nav */
137@media screen and (max-width: 960px){
138nav#gnav{
139display:none;
140}
141
142nav.drawer-nav{
143z-index:1000;
144}
145
146nav.drawer-nav li{
147font-size:13px;
148font-weight:200;
149letter-spacing:3px;
150color:#000;
151padding-bottom:5%;
152}
153
154nav.drawer-nav li a{
155text-decoration:none;
156color:#000;
157}
158
159nav.drawer-nav li a:hover{
160text-decoration:underline;
161color:#828486;
162}
163}
164
165/* container */
166div#container{
167padding:2% 0 10% 0;
168}
169
170div.clearfix:after{
171content: "";
172display: block;
173clear: both;
174}
175
176.clearfix {*zoom: 1;} /*IE6/7*/
177
178/* index.html */
179div#slideshow {
180position: relative;
181width:100%; /* 画像の横幅に合わせて記述 */
182height:510px; /* 画像の高さに合わせて記述 */
183}
184
185div#slideshow img {
186position: absolute;
187top: 0;
188left:0;
189z-index: 8;
190opacity: 0.0;
191width:100%;
192max-width: 100%;
193height: auto;
194}
195
196div#slideshow img.active {
197z-index: 10;
198opacity: 1.0;
199}
200
201div#slideshow img.last-active {
202z-index: 9;
203}
204
205/* footer */
206footer{
207width:100%;
208height:10%;
209padding-bottom:3%;
210position:absolute;
211grid-row-start: 2;
212grid-row-end: 3;
213}
214
215div.copyright{
216text-align:center;
217font-size:12px;
218font-weight:300;
219}

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

回答1件

ベストアンサー

コードをコピペで再現して確認出来た余白は

css
1div#container { 
2 padding: 2% 0 10% 0;
3}

のbottomにあたる10%の分ですが
これが原因て事でいいのでしょうか？

だとすると、
レスポンシブでpadding-bottom:0;で直るかと思います

投稿2018/11/04 19:14

akihiro3

総合スコア955

MURASE_YUKI

2018/11/06 10:20

ありがとうございました

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

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

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

HTML5,wordpressでのレスポンシブ対応時の縦余白について

HTML5,wordpressでのレスポンシブ対応時の縦余白について

関連した質問