无法摆脱的容器和页脚

我想提出一个网站，我的朋友之间的空白，而且我目前有两个问题，我似乎无法来解决：无法摆脱的容器和页脚

我可以”似乎摆脱了主容器和页脚之间存在的空白区域。有一小块白色从背景图像的底部延伸到页脚。
当浏览器窗口缩小时（特别是屏幕宽度的一半），页脚后会出现空白。

任何人都可以帮助我吗？谢谢！

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 &copy; 2016. All Rights Reserved.</p> 
 
    </footer> 
 
</body> 
 

 
</html>

来源

2016-01-13 Drew

可能的指导：[Mysterious Whitespace Underneath Image]（http://stackoverflow.com/a/31445364/3597276） –

这也许是默认的顶部和底部边缘上的页脚<p>，重置和看到的。

.copyright { 
    margin: 0; 
}

来源

2016-01-13 01:11:03 Stickers

无法摆脱的容器和页脚

回答

相关问题