フッター上部の空白をなくしたい。

前提・実現したいこと

HP作成中です。
フッターの上部に空白ができています。
videoタグのせいなのか
フッターの記述に問題があるのかわかりません。
教えてください。

html

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="styleA.css"> <title>SLYME</title> </head> <body> <header class="header" id="header"> <div class="inner"> <h1 class="logo"><a href="#"><img src="img/logo.jpg" alt=""></a></h1> <div class="global-navigation" id="global-navigation"> <ul> <li><a href="index.html">＃</a></li> <li class="js-link_match_location"><a href="service.html">＃</a></li> <li class="js-link_match_location"><a href="#">＃</a></li> <li class="js-link_match_location"><a href="#">＃</a></li> <li class="js-link_match_location"><a href="#">＃</a></li> </ul> </div> </div> </header> <div class="container-video"> <div class="table-center"> <div> <p>＃</p> </div> </div> <video id="video" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0"> <source src="img/main/Raindrops_Macro2_Videvo.mp4"> </div> </div> <footer class="footer" id="footer"> <div class="wrapper"> <ul class="footer_nav"> <li><a href="index.html">＃</a></li> <li><a href="service.html">＃</a></li> <li><a href="#">＃</a></li> <li><a href="#">＃</a></li> <li><a href="#">＃</a></li> </ul> </div> </footer> </body> </html>

css
@charset "utf-8";
*{
margin: 0px;
padding: 0px;
}

/▼header=================================================/
.header{
position: fixed;
top: 0;
left: 0;
background: #000;
height: 70px;
width: 100%;
z-index: 9999;
}
.header .logo{
width: 385px;
float: left;
padding: 0px 0 0 0;
}
.header .global-navigation{
width: 530px;
float: right;
}
.header .global-navigation li{
float: left;
margin: 0 0 0 6px;
}
.header .global-navigation li a{
display: block;
color: #fff;
font-size: 90%;
padding: 15px 12px 14px 12px;
border-top: #000 solid 3px;
text-decoration: black;
}
.header .global-navigation li.stay a,
.header .global-navigation li a:hover{
border-top: #E50020 solid 5px;

}
/▲/header=================================================/

/▼===============================================
container
=================================================/
.container-video {
margin: 0;
position: relative;
height: 600px;
overflow: hidden;
opacity: 0.01;
animation: load 1.5s 0.8s ease-out forwards;
}
.container-video #video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden;
transform: translate(-50%, -50%) scale(1.05);
}

@keyframes load {
100% {
opacity: 1;
}
}
.table-center {
display: table;
width: 100%;
position: relative;
height: 100%;
}
.table-center > div {
display: table-cell;
vertical-align: middle;
position: relative;
text-align: center;
}
.table-center > div p {
color: #fff;
text-shadow: 0 0px 5px rgba(0, 0, 0, 0.5);
text-transform: uppercase;
letter-spacing: 1px;
margin: 10px;
font-size: 2em;
font-weight: 600;
}

/▼footer====================================================/
.footer{
height: 0;
min-height: 100vh;
position: relative;
padding-bottom: 120px;
box-sizing: border-box;
margin-top: 0;
}
.footer ul{
width: 100%;
background-color: black;
text-align: center;
padding: 30px 0;
position: absolute;/←絶対位置/
bottom: 0;

}
.footer ul li{
display: inline-block;
margin: -5px 30px;

}
.footer ul li a{
text-decoration: none;
color: #fff;

}

.footer ul li a:hover{
color: #fff;
border-top: blue solid 3px;

}

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

回答1件

ベストアンサー

.footerにmin-height: 100vh;を設定しており、
その中の.footer ul はposition: absolute; bottom: 0; で最下辺に絶対配置してますので、
100vhから.footer ulの高さを引いた余白ができます。

希望のことは、コンテンツ全体の高さが画面高より小さくても、フッターは画面の最下辺に配置したい、ということでしょうか。だとしたら、.footer のCSSを下記のように設定します。

css
1.footer{
2  min-height: calc(100vh - 600px); /* 600px=フッター以外のコンテンツの高さ */
3  position: relative;
4  padding-bottom: 84px;  /* .footer ul の高さ */
5  box-sizing: border-box;
6  margin-top: 0;
7}