需要从网页底部删除空白，不确定是什么原因导致了它，很可能是DIV。我尝试设定所有元素的高度，但没有成功。可能是页脚或欢迎div的东西吗？
/* * {
border: 1px solid red !important;
}
*/
body {
background: rgba(1, 1, 1, 0);
height: 100%;
}
#welcome {
font-family: "Alfa Slab One", serif;
text-align: center;
font-size: 40px;
color: white;
margin-bottom: 0;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
display: none;
}
#welcomediv {
margin-left: 20px;
font-family: "Alegreya SC", serif;
font-size: 30px;
display: none;
}
#About {
height: auto;
background: black;
margin-top: 30px;
}
#abouth1 {
padding-top: 10px;
font-family: "Alfa Slab One", serif;
color: white;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
text-align: center;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
}
#navbar {
display: none;
}
#navbar li {
float: left;
}
#navbar li a {
font-family: "Alfa Slab One", serif;
font-size: 20px;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
padding-bottom: 10px;
text-decoration: none;
}
#navbar li a:hover {
background-color: #111;
}
#homepageh1 {
padding-left: 15px;
margin-top: 0;
margin-left: -10px;
margin-bottom: 0;
color: white;
font-size: 35px;
font-family: "Alfa Slab One";
text-shadow: 4px 4px 4px black;
display: none;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
h3 {
padding-left: 15px;
margin-top: 0;
margin-bottom: 0;
text-align: center;
font-size: 30px;
color: black;
font-family: "Alegreya Sans SC";
display: none;
}
li {
margin-bottom: 5px;
}
footer {
font-size: 20px;
position: relative;
bottom: 0;
right: 25%;
margin-left: 650px;
text-align: center;
display: none;
}
.fa {
color: white;
margin-left: 200px;
}
#moveleft {
margin-left: 75px;
margin-bottom: 0;
height: 300px;
}
#globe {
color: white;
font-family: "Alegreya Sans SC", serif;
padding-left: 175px;
font-size: 40px;
margin-top: -40px;
}
#brandsp {
font-size: 20px;
margin-left: -80px;
margin-top: -40px;
margin-bottom: 0;
}
#newdiv {
margin-top: 0;
font-size: 20px;
margin-left: -40px;
}
#clockicon {
position: relative;
padding-left: 345px;
bottom: 212.5px;
}
#clock {
position: relative;
color: white;
bottom: 254.5px;
padding-left: 510px;
font-family: "Alegreya Sans SC", serif;
font-size: 40px;
}
#clock a {
color: white;
text-decoration: none;
}
#clock a:hover {
color: grey;
}
#clockp {
position: relative;
bottom: 42.5px;
font-size: 20px;
padding-left: -200px;
margin-left: -80px;
}
#newdiv2 {
position: relative;
bottom: 65px;
font-size: 20px;
margin-left: -25px;
}
#newdiv3 {
position: relative;
bottom: 115px;
font-size: 20px;
margin-left: -20px;
}
#newspapericon {
position: relative;
bottom: 590px;
margin-left: 900px;
}
#newspaper {
font-family: "Alegreya Sans SC", serif;
color: white;
bottom: 641.5px;
position: relative;
font-size: 40px;
margin-left: 900px;
}
#newspaperdiv1 {
position: relative;
bottom: 65.5px;
font-size: 20px;
font-family: "Alegreya Sans SC", serif;
margin-left: -130px;
}
#newspaperdiv2 {
position: relative;
font-size: 20px;
font-family: "Alegreya Sans SC", serif;
margin-left: -40px;
bottom: 117.5px;
a
}
#newspaperp {
position: relative;
font-family: "Alegreya Sans SC", serif;
font-size: 20px;
color: white;
bottom: 42.5px;
margin-left: -70px;
}
#getstarted {
position: relative;
bottom: 90px;
font-family: "Alfa Slab One", serif;
color: white;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
text-align: center;
}<!DOCTYPE HTML>
<html>
<head>
<meta name="description" content="Global Hypebeast is a website for exploring street fashion all across the globe. From everything from Supreme to The Hundreds, Global Hypebeast has it all. This isn't your regular fashion website.
I put in all the work myself to create a truly personalized website that brings fashion into the spotlight." />
<title>Street Wear from Across the World</title>
<link rel="icon" href="http://www.globalhypebeast.com/favicon.ico?v=2" />
<link href='//fonts.googleapis.com/css?family=Alfa Slab One|Alegreya Sans SC|Alegreya SC|Space Mono' rel='stylesheet' />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h1 id="homepageh1">Global Hypebeast: Street Fashion Worldwide</h1>
<ul id="navbar">
<li><a class="active" href="http://www.globalhypebeast.com">HOME</a>
</li>
<li><a href="http://www.globalhypebeast.com/brands">BRANDS</a>
</li>
<li><a href="#">NEWS</a>
</li>
<li><a href="#">ENTERTAINMENT</a>
</li>
</ul>
<h1 id="welcome">
Mission Hypebeast
</h1>
<div id="welcomediv">
Welcome to Global Hypebeast. I created this website with the intent of sharing street fashion from all around the globe. Street wear is becoming more prominent in cities all around the world, especially those with a high population such as Tokyo, New
York, and Los Angeles. On this site, you will find street wear images, upcoming brand collaborations, and a general definition of what street fashion really is. If you haven't already acquired a taste for street wear, you will after spending time
on my website. I promise you. Who doesn't want to be in the know of the world's most iconic fashion?
</div>
<div id="About">
<h1 id=abouth1>
Everything From Fashion To Entertainment
</h1>
<div id="moveleft">
<i class="fa fa-globe fa-5x" aria-hidden="true"></i>
<div id="globe">
<p>
Brands
</p>
<p id="brandsp">
We've got fashion from Supreme,
<br/>
<div id="newdiv">Palace, Bape, Stussy, etc.</div>
</p>
</div>
<i id="clockicon" class="fa fa-clock-o fa-5x" aria-hidden="true"></i>
<div id="clock">
<p>
Articles
</p>
<p id="clockp">
New articles are posted daily so
<br/>
<div id="newdiv2">you'll never miss out</div>
<br/>
<div id="newdiv3">on fashion again.</div>
</p>
</div>
<i id="newspapericon" class="fa fa-newspaper-o fa-5x" aria-hidden="true"></i>
<div id="newspaper">
<p>
News
</p>
<p id="newspaperp">
Entertainment and fashion
<br/>
<div id="newspaperdiv1">news combined creates the best experience</div>
<br/>
<div id="newspaperdiv2">for all things fashion.</div>
</p>
</div>
</div>
<h1 id="getstarted">
Get started! Check out some posts!
</h1>
</div>
<footer>
<p>© Daniel Sigut</p>
</footer>
</body>
</html>找到此类错误的一个好习惯是删除元素，直到您可以确定哪个是问题的来源。
但是，在这里，您的问题似乎来自您将许多元素定位为"相对"的事实，然后使用botter：xx px移动它们；因此，它们出现在顶部，但布局仍然包括他们应该占据的空间。
我建议您重构代码，以免用像素来定位元素像素。使用" display：inline-block"内联元素，并使用边距/桨叶调整它们之间的空间。
只需将其添加到您的CSS：
html{
margin:0;
padding:0;
max-height:100vh;
overflow:hidden;
}
body {
background: rgba(1, 1, 1, 0);
height: 100%;
}