Question

我正在为我的朋友制作一个网站，我目前遇到两个我似乎无法解决的问题：

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

有人能帮帮我吗？谢谢！

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>

Answer 1

它可能是页脚中<p>的默认顶部和底部边距，重置并查看。

.copyright {
  margin: 0;
}

无法摆脱容器之间的空白区域。页脚

1 个答案: