画面サイズによってページ下に白い空白ができる

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8    <link rel="stylesheet" href="web.css">
9    <script   src="https://code.jquery.com/jquery-3.6.0.js"   integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="   crossorigin="anonymous"></script>
10
11</head>
12<body id='dosukoi'>
13    <header class="webheader pageheader">
14<h1><a href="web.html"></a>文房具の魅力</h1>
15
16
17
18<nav class="hambarger">
19    
20    <ul class="pagenav">
21<li class="tamtam menu "><a href="pencil.html">ペンシル</a></li>
22<li class="tamtam menu "><a href="ballpen.html">ボールペン</a></li>
23<li class="tamtam menu "><a href="fountain.html">万年筆</a></li>
24<li class="tamtam menu "><a href="pencase.html">ペンケース</a></li>
25
26    </ul>
27</nav>
28    </header>
29 
30    <div class="hambarger tamtam">
31<span class="icon"></span>
32<span class="icon"></span>
33<span class="icon"></span>
34    </div>
35
36    <div class="stationary pageheader">
37    <h2 class="gold">Stationary is beautiful</h2>
38    <p class="sub">〜文房具で日常を優雅に〜</p>
39
40    </div>
41  
42
43 
44    <script src="web.js"></script>
45</body>
46</html>

CSS
1html {
2    font-size: 100%;
3}
4h2{font-size: 18px;}
5.pagenav{
6    
7    font-size: 1.35remrem;
8    text-transform: uppercase;
9    list-style: none;
10
11}
12h1{
13    font-weight: bold;
14}
15body{
16
17    background-image: url(images/background.jpg);
18    background-repeat: no-repeat;
19    background-size: cover;
20    background-position: center top;
21
22   
23}
24
25
26.pagenav a {  
27    color: #32605a;
28  
29    
30}
31a{
32    text-decoration: none;
33}
34
35
36.pagenav li{
37    left: 20px;
38}
39
40
41
42 header h1{margin-top: 15px;
43    margin-left: 80px;
44    font-size: 35px;
45}
46 .pageheader{
47     max-width: 1100px;
48     margin: 0 auto;
49     padding: 0 4%;
50 }
51 .stationary{
52     text-align: center;
53     margin-top: 10%;
54 }
55 .gold{
56     font-size: 3.5rem;
57     text-transform: none;
58     font-weight: normal;
59     font-family: serif;
60    
61 }
62 @media(max-width:750px){
63     .gold{
64         font-size: 2.0rem;}
65     .sub{
66         font-size: 1.5rem;
67     }    
68     header h1{
69         font-size: 2.0rem;
70     }
71 }
72 .sub{
73     font-family: fantasy;
74     font-size: 1.0rem;
75 }
76body{
77    color: white;
78}
79.menu{
80
81   display: block;
82   transition: all 0.5s;
83   
84   opacity: 0;
85   border-bottom: 1px solid black;
86
87}
88
89.hambarger{
90    display: block;
91    font-size: 18px;
92    position: fixed;
93top: 30px;
94left: 30px;
95width: 30px;
96height: 32px;
97cursor: pointer;
98}
99.hambarger span{
100    position: absolute;
101    display: block;
102    left: 0;
103    width: 30px;
104    height: 2px;
105    background-color: black;
106    transition: all 0.5s;
107    border-radius: 4px;
108}
109
110.hambarger span:nth-child(1){
111    top: 4px;
112    
113}
114.hambarger span:nth-child(2){
115    top: 15px;
116    
117}
118.hambarger span:nth-child(3){
119    bottom: 4px;
120}
121
122.pagenav a:nth-child(1){
123    top: 10px;
124    }
125    .pagenav a:nth-child(2){
126        top: 20px;
127    }
128
129
130
131    ul{
132        position: absolute;
133        top: 20px;
134        left: 0;
135        width: 120px;
136        padding: 0;
137    }
138.open{
139    opacity: 1;
140    left: 5px;
141  }
142  
143

写真サイズの関係で横を狭くして縦長に変えた時に下の方に空白ができるのですが、これを無くしたいです。

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

回答1件

ベストアンサー

コンテンツ全体の高さが画面高より小さいために空白ができます。
body に min-height: 100vh; を設定して画面高より小さくならないようにすればいいでしょう。

css
1body{
2
3    background-image: url(images/background.jpg);
4    background-repeat: no-repeat;
5    background-size: cover;
6    background-position: center top;
7
8    min-height: 100vh; /* 追加 */ 
9}
10