【发布时间】：2020-02-06 16:36:28
【问题描述】：
所以这是我第一次尝试 html 和 css。我无法设法让网站底部的空白消失。这是html代码，图片为隐私而省略
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<meta charset="utf-8">
<script src="https://use.fontawesome.com/d1341f9b7a.js"></script>
<link rel="stylesheet" href="mystyle.css">
<title>Personal Website</title>
</head>
<body>
<div class="box">
<img src="someimage.png" alt="" class="box-img" >
<h1>My Name</h1>
<h5>Heading 2</h5>
<p>Some texts in this paragraph.</p>
<ul>
<li><a href="#"><i class="fa fa-github-square" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a></li>
</ul>
</div>
</body>
</html>
元素在以下css代码中描述：
@viewport{
width:device-width;
height:device-height;
zoom:1.0;
}
html{
height:100%;
padding-bottom:10%;
}
/* body{ */
/* min-height:100%; */
/* margin: 0; */
/* padding: 0; */
/* background: url(bg.jpg) no-repeat; */
/* background-size: 100%; */
/* overflow:auto; */
/* padding-bottom:20px; */
/* /\* border: 1px solid transparent; *\/ */
/* } */
.box{
width: 450px;
background: rgba(0, 0, 0, 0.8);
padding: 100px;
text-align: center;
margin: auto;
margin-top: 5%;
color: white;
font-family: 'Century Gothic',sans-serif;
font-size:18px;
overflow:auto;
height:100%;
}
.box-img{
border-radius: 50%;
width: 200px;
height: 200px;
}
.box h1{
font-family: 'Century Gothic',sans-serif;
font-size: 80px;
letter-spacing: 4px;
font-weight: 100;
}
.box h5{
font-family: 'Century Gothic',sans-serif;
font-size: 18px;
letter-spacing: 3px;
font-weight: 100;
text-align: center;
}
.box p{
text-align: justify;
font-size: 18px;
font-family: 'Century Gothic',sans-serif;
font-size: 16px;
font-style:italic;
letter-spacing: 3px;
font-weight: 100;
text-align: center;
}
ul{
margin: 0;
padding: 0;
}
.box li{
display: inline-block;
margin: 6px;
list-style: none;
}
.box li a{
color: white;
text-decoration: none;
font-size: 60px;
transition: all ease-in-out 250ms;
}
.box li a:hover{
color: #8b8b8b;
}
.clearfix::after{
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
要点：所以我的网站是这样的：一个包含img-box的box元素并显示一些标题和段落。我的照片显示在 img-box 中。 Body 有一个背景，设置在mystyle.css 中。最初，我将背景设置为主体。
问题：打开或关闭背景（在当前的 css 代码中，我已将其注释掉），我的底下仍然有白色背景。我希望我的整个盒子都适合移动版和桌面版的浏览器框架。换句话说，假设我在移动设备上打开网页，它应该会自动调整大小，并且我应该会看到盒子很合身，而无需手动放大。
尝试的解决方案：我尝试按照建议添加视口元名称，以希望使网站对移动设备友好并删除下方的空白。尽管如此，问题仍然存在。如果您为 body 和 box 设置深色背景，这会清楚地显示出来。
请告诉我如何实现这一点。
【问题讨论】：