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

前提・実現したいこと

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

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

HTML
1<!doctype html>
2<html lang="ja">
3  <head>
4    <!-- Required meta tags -->
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1">
7    <link rel="stylesheet" href="style.css">
8
9    <!-- Bootstrap CSS -->
10    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
11
12    <title>私は仕事が大好きです。</title>
13  </head>
14  <body>
15    
16    <header>
17      <div class="top">
18      <div class="logo">
19        <img src="http://placehold.jp/24/cc9999/993333/150x100.png" alt="">
20       <nav>
21         <ul>
22           <li>TOP</li>
23           <li>PRODUDT</li>
24           <li>ABOUT</li>
25           <li>NEWS</li>
26           <li>CONTACT</li>
27         </ul>
28        </nav>
29        </div>
30      
31    
32    
33      <div id="carouselExampleSlidesOnly" class="carousel slide  carousel-fade" data-bs-ride="carousel">
34        <div class="carousel-inner">
35          <div class="carousel-item active">
36            <img src="http://placehold.jp/24/cc9999/993333/150x100.png" class=d-block " alt="...">
37          </div>
38          <div class="carousel-item">
39            <img src="http://placehold.jp/24/cc9999/993333/150x100.png" class="d-block  "alt="...">
40          </div>
41          <div class="carousel-item">
42            <img src="http://placehold.jp/24/cc9999/993333/150x100.png" class="d-block " alt="...">
43          </div>
44          <div class="carousel-item">
45            <img src="http://placehold.jp/24/cc9999/993333/150x100.png" class="d-block " alt="...">
46          </div>
47        </div>
48      </div> 
49     </div> 
50    </header>
51   
52    <div class="main1">
53        <div class="text">
54        <h1>見出し</h1>
55        <p>テキストテキストテキストテキスト<br>
56          テキストテキストテキストテキスト<br>
57          テキストテキストテキストテキスト　</p>
58          <img id=kago src="http://placehold.jp/24/cc9999/993333/150x100.png" alt="">
59          <p>テキストテキストテキストテキスト<br>
60            テキストテキストテキストテキスト<br>
61            テキストテキストテキストテキスト　</p>
62       </div>
63     </div>
64    
65   
66   　　 <div class="main2">
67        　<div class="lavel">
68       　 <h1>PRODCT</h1>
69        　<a href="#">More</a>
70     　　 </div>
71
72     <div class="container padding: 10px;">
73      <div class="row align-items-start justify-content-center margin-left: 0; margin-right: 0; ">
74        <div class="col-md-4 w-25 h-25  photo">
75          <a class="link" href="#">
76          <img d-block mx-auto img-fluid  src="http://placehold.jp/24/cc9999/993333/150x100.png" alt="">
77          <p>テキスト</p>
78          </a>
79        </div>
80          <div class="col-md-4  w-25 h-25  photo">
81            <a  class="link" href="#">
82         <img d-block mx-auto img-fluid  src="http://placehold.jp/24/cc9999/993333/150x100.png" alt="">
83         <p>テキスト</p>
84            </a>
85        </div>
86        <div class="col-md-4 w-25 h-25 photo">
87          <a class="link" href="#">
88          <img d-block mx-auto img-fluid  src="http://placehold.jp/24/cc9999/993333/150x100.png" alt="">
89          <p>テキスト</p>
90          </a>
91        </div>
92      </div>
93      <div class="row align-items-center justify-content-center">
94        <div class="col-md-4 w-25 h-25 photo">
95          <a class="link"  href="#">
96          <img d-block mx-auto img-fluid src="http://placehold.jp/24/cc9999/993333/150x100.png" alt="">
97          <p>テキスト</p>
98          </a>
99        </div>
100        <div class="col-md-4 w-25 h-25 photo">
101          <a class="link" href="#">
102         <img d-block mx-auto img-fluid  src="http://placehold.jp/24/cc9999/993333/150x100.png" alt="">
103         <p>テキスト</p>
104         </a>
105        </div>
106        <div class="col-md-4 w-25 h-25 photo">
107          <a class="link" href="#">
108         <img d-block mx-auto img-fluid  src="http://placehold.jp/24/cc9999/993333/150x100.png" alt="">
109         <p>テキスト</p>
110         </a>
111        </div>
112      </div>
113    </div>
114
115
116    
117    <div class="main3">    
118      <div class="lavel">
119         <h1>NEWS</h1>
120         <a href="#">More</a>
121      </div>
122    
123
124      <div class="container">
125        <div class="row news align-items-start justify-content-center ">
126         <div class="col-md-6 photo2">
127          <img src="http://placehold.jp/24/cc9999/993333/150x100.png" 　alt="">
128         </div>
129         <div class="col-md-6 comment">
130          <h2 id="text">テキスト</h2>
131          <time datetime=”2021”>2021年8月</time>
132         <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
133         </div>
134       </div> 
135       <div class="row news align-items-start justify-content-center ">
136         <div class="col-md-6 photo2">
137          <img  src="http://placehold.jp/24/cc9999/993333/150x100.png" 　alt="">
138          </div>
139          <div class="col-md-6 comment">
140            <h2 id="text">テキスト</h2>
141            <time datetime=”2021”>2021年4月</time>
142            <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
143            
144          </div>
145       </div> 
146       <div class="row  news align-items-start justify-content-center ">
147          <div class="col-md-6  photo2 ">
148            <img  src="http://placehold.jp/24/cc9999/993333/150x100.png" 　alt="">
149          </div>
150          <div class="col-md-6 comment">
151            <h2 id="text">テキスト</h2>
152          <time datetime=”2021”>2021年5月</time>
153          <p>テキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
154          </div>
155        </div> 
156        <div class="row  news align-items-start justify-content-center">
157          <div class="col-md-6 photo2 ">
158          <img src="http://placehold.jp/24/cc9999/993333/150x100.png" 　alt="">
159         </div>
160         <div class="col-md-6 comment">
161          <h2 id="text">テキスト</h2>
162          <time datetime=”2021”>2021年6月</time>
163          <p>テキストテキスト</p>
164         </div>
165       </div> 
166       <div class="row  news align-items-start justify-content-center ">
167         <div class="col-md-6 photo2 ">
168          <img  src="http://placehold.jp/24/cc9999/993333/150x100.png" 　alt="">
169         </div>
170         <div class="col-md-6 comment">
171          <h2 id="text">テキスト</h2>
172          <time datetime=”2021”>2021年7月</time>
173          <p>テキストテキスト</p>
174         </div>
175       </div> 
176       <div class="row news align-items-start justify-content-center  ">
177          <div class="col-md-6 photo2">
178            <img  src="http://placehold.jp/24/cc9999/993333/150x100.png" 　alt="">
179         </div>
180         <div class="col-md-6 comment">
181          <h2 id="text">テキスト</h2>
182          <time datetime=”2021”>2021年3月</time>
183         <p>テキストテキスト</p>
184         </div>
185       </div> 
186      </div>
187    </div>
188
189    <div class="net">
190      <a href="#">facebook</a>
191      <a href="#">twitter</a>
192      <a href="#">google</a>
193    </div>
194
195    <div class="sub-navi">
196      <ul>
197        <li>TOP</li>
198        <li>PRODUDT</li>
199        <li>ABOUT</li>
200        <li>CONTACT</li>
201      </ul>
202    </div>
203<footer>
204
205      <div class="container">
206        <div class="row">
207          <div class="col-md-6 footer-logo">
208            <img src="http://placehold.jp/24/cc9999/993333/150x100.png" alt="">
209          </div>
210          <div class="col-md-6 copy-right">
211            <p>&copy;2021 </p> 
212          </div>
213        </div>
214      </div>
215    </footer>
216 
217      
218
219   
220        
221     　 
222
223
224    <!-- Optional JavaScript; choose one of the two! -->
225
226    <!-- Option 1: Bootstrap Bundle with Popper -->
227    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
228
229    <!-- Option 2: Separate Popper and Bootstrap JS -->
230    <!--
231    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
232    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
233    -->
234  </body>
235</html>
236

css
1*{
2padding:0;
3margin:0;
4}
5footer {
6    height: 170px;
7    margin-top: auto;
8    background-color: gray;
9}
10.footer-logo {
11   margin-top: auto;
12    text-align: center;
13}
14
15.footer-logo img {
16    width: 80px;
17    height: 80px;
18    margin-top: 50px;
19}
20
21.copy-right {
22    padding:90px;
23 }

試したこと

htmlとbodyにid=wrappで
width: 100%;
position:relative;
min-height: 100%;
footerにposition:absoled
を付けたりしましたが、そうするとフッターのデザインが崩れてしまいます

補足情報（FW/ツールのバージョンなど）

bootstrap ver.5.0.0

itagagaki

2021/09/01 08:14

余白ってどこのことを言ってます？

morimorinoki

2021/09/01 08:32 編集

もしかして余白は灰色のフッターの下にある白い部分でしょうか？あと、コードなどは可能な限りすべて載せていただけますと検証しやすいです。

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

回答1件

ベストアンサー

原因は二つあります。

まずHTMLの</footer>から<!--までの間に全角スペースがあります。これを消してください。

そしてもう一つはCSSの.copy-rightのpadding:90px;で、このボックスが先祖のheaderを超える大きさになっています。

以下、レイアウトの代替案です。

CSS
1footer .container,
2footer .container .row {
3  height: 100%;
4}
5.copy-right {
6  height: 100%;
7  display: flex;
8}
9.copy-right p {
10  margin: auto 0;
11}