我知道有几个这样的问题，但我找不到答案。
我在HTML页面上使用了相对的CSS样式来将元素放在我想要的位置。因此，我在页面底部留下了大约500px高的空白区域。我可以让页脚坐在底部，但是页脚和主体之间有500px的空白区域。我尝试使用负边距并调整大小，但没有任何效果。我正在使用块元素div来保存内容，然后在页面上移动div。我怎样才能摆脱白色空间？
码：
<head>
<title>Ethan's Homepage</title>
<link rel="icon" type="image/jpg" href="https://previews.123rf.com/images/baser1/baser11403/baser1140300049/26741239-cool-geek-logo-template.jpg" >
<style type=text/css>
html{
height: 2000px;
}
body{
background-color: black;
}
#main{
background-color: gray;
position:relative;
bottom: 450px;
display: block;
margin-bottom: -125px;
}
#menu{
position: relative;
bottom: 400px;
display: inline-block;
}
#menu ul{
list-style-type: none;
display: inline-block;
}
#nselect{
color: white;
font-size: 130%;
border-radius: 5px;
height: 30px;
margin: 20px;
padding: 10px;
}
#nselect:hover{
background-color: rgb(154, 163, 175);
border-radius: 5px;
color: black;
}
#nselect a{
text-decoration: none;
}
#selected{
background-color: blue;
color: yellow;
font-size: 130%;
border-radius: 5px;
height: 30px;
margin: 20px;
padding: 10px;
}
#headerimg{
height: 300px;
width: 100%;
}
footer img{
width: 100%;
margin-bottom: -250px;
}
#search{
text-align: right;
position: relative;
bottom: 30px;
margin: 30px;
}
#videos{
margin: 30px;
position: relative;
left: 30px;
display: block;
}
.row {
display: flex;
flex-wrap: wrap;
padding: 0 4px;
}
/* Create three equal columns that sits next to each other */
.column {
flex: 33.3%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
}
#sicons{
position: relative;
left: 700px;
bottom: 310px;
display: block;
}
</style>
</head>
<header>
<img id="headerimg" src="http://www.spulsa.info/wp-content/uploads/cool-twitter-banners-70-cool-twitter-headers-random-styles-from-nature-to-business.jpg">
<h1 style="position: relative; left: 700px; bottom: 200px; color: white">Home</h1>
<div id="menu">
<ul>
<li><div id="selected">Home</div></li>
<li><a href="file:///C:/Users/Ethan/Documents/work.html"><div id="nselect">Work</div></a></li>
<li><div id="nselect">Fun</div></li>
<li><div id="nselect">News</div></li>
</ul>
</div>
</header>
<body>
<div id="main">
<form id="search" method="get" action="http://www.google.com/search" target="_blank"> <input type="text" name="q" size="31" maxlength="255" value="" /> <input type="submit" value="Google Search" /></form>
<div id="videos"><iframe width="560" height="315" src="https://www.youtube.com/embed/UOUBW8bkjQ4" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>
<div id="sicons">
<div class="row">
<div class="column">
<a href="https://www.facebook.com/"><img src="https://i2.wp.com/www.vectorico.com/wp-content/uploads/2018/02/Facebook-Icon-Dark.png?resize=300%2C300" height="50px" width="50px"></a>
<a href="https://twitter.com/"><img src="https://womenin.digital/wp-content/uploads/2017/03/twitter.png" height="60px" width="60px"></a>
<a href="https://ca.linkedin.com/"><img src="https://i1.wp.com/www.vectorico.com/wp-content/uploads/2018/02/LinkedIn-Icon-Dark.png?resize=300%2C300" height="50px" width="50px"></a>
</div>
<div class="column">
</div>
<div class="column">
<a href="https://www.instagram.com/"><img src="https://abbyjreed.com/wp-content/uploads/2014/03/galaxy_instagram_social_icon_50x50.png" style="border-radius: 25px; padding: 2px;"></a>
<a href="https://www.tumblr.com/"><img src="https://abbyjreed.com/wp-content/uploads/2014/03/galaxy_tumbler_social_icon_50x50.png" style="border-radius: 25px; padding:2px;"></a>
<a href="https://www.youtube.com/"><img src="https://abbyjreed.com/wp-content/uploads/2014/03/galaxy_you_tube_social_icon_50x50.png" style="border-radius: 25px; padding:2px;"></a>
</div>
<div class="column">
</div>
<div class="column">
<a href="https://www.pinterest.ca/"><img src="https://image.flaticon.com/icons/svg/23/23775.svg" height="50px" width="50px" style="border-radius: 25px"></a>
<a href="https://wordpress.com/"><img src="https://foomandoonian.files.wordpress.com/2011/11/splatter-grunge-wordpress-logo.png" height="60px" width="60px"></a>
<a href="https://mail.google.com/mail/u/0/"><img src="https://cdn1.iconfinder.com/data/icons/picons-social/57/61-google-inbox-512.png" height="60px" width="60px"></a>
</div>
</div>
</div>
</br></br></br>
</div>
</body>
<footer>
<img src="https://coverfiles.alphacoders.com/498/49814.jpg">
</footer>
我错过了头和身体之间的空间。
这应该现在有效：
https://codepen.io/anon/pen/zLrpxw?editors=1100
我修改了菜单：
#menu{
position: absolute;
top : 0;
display: inline-block;
}
我相信我已经为你修好了。我从html标签中删除了height: 2000px;，因为在那里设置它并不是一个好习惯。我也从页脚中删除了margin-bottom: -250px;。
这是我的解决方案的codepen：
https://codepen.io/anon/pen/zLrpxw
告诉我，如果这是你正在寻找的:)我强烈建议你学习一些关于例如bootstrap的东西。它可以让您轻松完全控制页面布局，包括页眉，页脚和正文网格。