HTML日和在相对样式在页面底部留下400 px空白？
HTML日和在相对样式在页面底部留下400 px空白？
提问于 2018-08-09 01:10:53
我在HTML页面上使用了相对CSS样式来将元素放置在我想要的位置。正因为如此，我在页面底部留下了大约500磅高的空白。我可以让页脚坐在底部，但在页脚和身体之间有500 px的空白。我试着使用负边距和调整大小，但是没有什么效果。我使用块元素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>
回答 2
Stack Overflow用户
发布于 2018-08-09 09:14:05
我把height: 2000px;移除了，因为设置它不是很好的做法。我也移除了margin-bottom: -250px;。
下面是我的解决方案代码：
Stack Overflow用户
发布于 2018-08-09 10:32:09
我修改了菜单：
#menu{
position: absolute;
top : 0;
display: inline-block;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/-100002031
复制相关文章
相似问题