部分背景溢出到另一个部分答案

【问题标题】：Section background overflowing into another section部分背景溢出到另一个部分
【发布时间】：2016-11-17 03:30:19
【问题描述】：

对于这个有点冗长的解释，我提前道歉。我正在尝试创建一个诸如http://melaniedaveid.com/ 之类的网站来提高我的编码能力。我创建了第一部分页面，结果很好。但是当我添加另一个部分时，上一个部分不再填满整个页面（图片：http://imgur.com/a/EbUKn）。

为了解决这个问题，我给了第一部分的 ID：

#header {
height: 100%;}

这解决了问题（http://imgur.com/a/BlckC），但现在当我调整浏览器大小时，第二部分溢出到我的第一部分，覆盖文本（http://imgur.com/a/C1jED）。任何建议/线索将不胜感激！

body {
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('/img/roses.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-size: 20px;
  height: 100vh;
}

/*------------------------------------------------  HOME PAGE  ------------------------------------------------------------------*/

/*------------------------------
HEADING TEXT
-------------------------------*/
.name h1 {
  font-family: 'Muli', sans-serif;
  font-size: 500%;
  font-weight: 300;
  text-align: center;
  padding-top: 10%;
  color: #ecf0f1;
  font-family: 'Cormorant Garamond', serif;
}

.name p {
  font-family: 'Play', sans-serif;
  font-size: 130%;
  text-align: center;
  padding-top: 5%;
  color: #ecf0f1;
  font-family: 'Merriweather', serif;
  font-weight: 300;
  padding-right: 10%;
  padding-left: 10%;
}

/*------------------------------
Nav Bar
-------------------------------*/

.navigation p {
  display: inline;
  font-family: 'Play', sans-serif;
  color: #ecf0f1;
}

.navigation {
  text-align: center;
  padding-top: 15%;
}

.contents,
.contents:hover {
  text-decoration: none;
  color: #ecf0f1;
  font-family: 'Delius Unicase', cursive;
}

/*------------------------------------------------  ABOUT PAGE  ------------------------------------------------------------------*/

/*------------------------------
About Heading
-------------------------------*/

#about {
  background-color: black;
  background-size: cover;
  height: 100%;

}

#header {
  height: 100%;
}

<section id="header">  <!-------------------------  HOME PAGE  -------------------------->


  <div class="container">
    <div class="row">
      <div class="col-xs-12 name">
        <h1>Temple Naylor</h1>
      </div>
    </div>

    <div class="row">
      <div class="col-xs-12 name">
        <p>I create Web-designs with a sense of Feng-Shui in mind; resulting for a intuitive, responsive, harmonious, experience for users across the world.</p>
      </div>
    </div>

    <div class="row">
      <div class="col-xs-12 navigation hidden-sm-down">
        <p><a class="contents" href="#">ABOUT</a> / </p>
        <p><a class="contents" href="#">WORK</a> / </p>
        <p><a class="contents" href="#">CONTACT</a> / </p>
        <p><a class="contents" href="#">PHOTOGRAPHY</a></p>

      </div>
    </div>
  </div>

</section>


<section id="about">  <!-------------------------  ABOUT PAGE  -------------------------->


  <div class="container">
    <div class="row about">
      <div class="col-md-6">
        <p class="big-text"></p>
      </div>
    </div>

    <div class="row">
      <div class="col-md-6 about-text">
        <p >Yup</p>
      </div>
    </div>
  </div>
</section>

【问题讨论】：

当我做这种工作时，我使用 jquery 根据视口尺寸设置section 高度。
尝试将#header height 更改为min-height: #header { min-height: 100%; }。是你需要的吗？
@Banzay 这工作得很好！太感谢了。下次留下一个实际的答案，这样我就可以标记你是正确的。我想下次我将使用 jquery 来简化它。
我已将评论复制到答案部分。

标签： html css twitter-bootstrap-3 responsive-design

【解决方案1】：

您可以为此使用 css vh 属性。

#header {
    height: 100vh;
}

这里有更多关于css units 的信息。希望对您有所帮助。

【讨论】：

我试过了，但没用，最后发现解决方案是 min-height: 100%;虽然你是这篇文章的唯一答案，但会给你一个有用的文章的检查（：

【解决方案2】：

将#header高度更改为最小高度：

#header { 
    min-height: 100%; 
}

【讨论】：