html - Bootstrap 行重叠

Question

我正在尝试制作一个页面，其中有两个部分使用行堆叠在一起。每个部分都应该是浏览器窗口的高度，但由于某种原因，第二行与第一行的大部分重叠，除了标题。

这是我的代码的链接: http://www.bootply.com/WwcepyZC01

Answer 1

如果我正确理解你的问题，你可以使用 height: 100vh 并删除 position: absolute。我还对您的 HTML 进行了一些重组，使 .layer2 不是 .layer1 的子级。

.layer1 {
  width: 100%;
  height: 100vh;
  background-image: url(<%=asset_path "home_bg.jpg"%>);
  background-size: cover;
  background-color: purple;
}
.title-wide h1 {
  top: 10%;
  left: 10%;
  right: 10%;
  color: #ffffff;
  font-size: 10vmax;
}
.home-caption {
  position: absolute;
  left: 20%;
  right: 20%;
  top: 30%;
}
.title-wide h2 {
  color: #ffffff;
  font-size: 4vmax;
}
.col-md-7 {
  position: absolute;
  text-align: center;
  left: 15%;
  right: 15%;
  height: 100%;
  top: 50%;
  font-size: 10vw;
}
.btn-default {
  background: rgba(255, 255, 255, 0.8);
}
.title-wide {
  left: 90%;
  right: 90%;
}
.btn-xlarge {
  padding: 20px 20px;
  font-weight: 700;
  line-height: normal;
  border-radius: 200px;
  border: 2px solid none;
  text-align: center center;
  height: 3em;
  font-size: 25px;
  width: 10em;
}
.layer2 {
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-color: green;
}

<div class="layer1 row-fluid">
  <div class="title-wide text-center">
    <h1>My Name</h1>
    <div class="home-caption text-center">
      <h2>I am a person working for a nameless corporation</h2>
      <div class="row">
        <hr>
        <div class="offset4">
        </div>
      </div>
    </div>
  </div>
</div>

<div class="layer2 row-fluid">

</div>


<div id="push"></div>