我正在为我的 friend 制作一个网站，目前我有两个似乎无法解决的问题:
我似乎无法摆脱存在于主容器和页脚之间的空白区域。从背景图像的底部到页脚有一小段白色。
当浏览器窗口缩小(尤其是屏幕宽度的一半)时，页脚后会出现空白。
谁能帮帮我？谢谢!
body {
margin: 0px;
font-size: 62.5%;
padding: 0px;
}
header {
width: 100%;
height: 90px;
background-color: #000000;
}
#logo_home {
position: relative;
float: left;
left: 5%;
width: 20%;
top: 7.5px;
}
#logo {
height: 75px;
width: 300px;
}
nav {
position: relative;
float: right;
right: 5%;
width: 35%;
height: 50px;
top: 20px;
}
ul {
margin-top: 0px;
margin-bottom: 0px;
position: relative;
top: 6.5px;
}
li {
display: inline-block;
margin-left: 2.5%;
margin-right: 2.5%;
position: relative;
list-style-type: none;
padding-top: 0px;
}
.nav_link {
font-family: 'PT-Sans', sans-serif;
color: #FFFFFF;
font-size: 1.2em;
text-transform: uppercase;
line-height: 37px !important;
text-decoration: none;
}
.nav_link:link {
color: #ffffff;
}
.nav_link:visited {
color: #ffffff;
}
.nav_link:hover {
color: #dddddd;
}
#video_container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
#video_container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 100px;
left: 17.5%;
width: 65%;
height: 65%;
}
#main_container {
background-image: url("../images/background.jpg");
background-size: cover;
margin: 0px;
}
footer {
background-color: #000000;
height: 50px;
width: 100%;
margin: 0px;
}
.copyright {
color: white;
font-family: 'PT-Sans', sans-serif;
font-size: 1.2em;
position: relative;
text-align: center;
top: 15px;
}<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta name="robots" content="noindex, nofollow, noarchive" />
<link href="css/stylesheet.css" type="text/css" rel="stylesheet" />
<title>Hyperdog Productions</title>
</head>
<body>
<header>
<div id="logo_home">
<a href="index.html" title="Home">
<img id="logo" src="images/logo.jpg" alt="logo">
</a>
</div>
<nav>
<ul>
<li><a class="nav_link" id="about" href="about.html" title="About">About</a>
</li>
<li><a class="nav_link" id="short_films" href="short_films.html" title="Short Films">Short Films</a>
</li>
<li><a class="nav_link" id="cast_crew" href="cast_crew.html" title="Cast/Crew">Cast/Crew</a>
</li>
<li><a class="nav_link" id="gallery" href="gallery.html" title="Gallery">Gallery</a>
</li>
<li><a class="nav_link" id="links" href="links.html" title="Links">Links</a>
</li>
<li><a class="nav_link" id="contact_us" href="contact_us.html" title="Contact Us">Contact Us</a>
</li>
</ul>
</nav>
</header>
<div id="main_container">
<div id="video_container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/EuIXJIp8f6U" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<footer>
<p class="copyright">Copyright © 2016. All Rights Reserved.</p>
</footer>
</body>
</html>最佳答案
这可能是 <p> 上的默认顶部和底部边距在页脚中，重置它并查看。
.copyright {
margin: 0;
}
关于html - 无法摆脱容器和页脚之间的空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34756691/