推动Div低于另一个

时间：2016-08-27 21:41:00

标签： html css

我有一个div部分（＃section1），我希望保持100％的高度，但如果需要适合其他内容则展开。宽度为100％。当你向下滚动页面时，我有一个低于那个的div（＃section2），相同的原则是100％的高度和宽度，高度根据需要扩展。我的问题是，第二个不会一直向下，因为第一个div是绝对的。相反，它有第一部分。有人有建议吗？我在这个项目中使用Bootstrap 4。

header {
  line-height: 100px;
  height: 100px;
  width: 100%;
  background: #f3f3f3;
  position: fixed;
  top: 0;
  z-index: 2;
}
html {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  min-height: 100%;
  height: 100%;
}
body {
  background: none;
  height: 100%;
}
p {
  font-size: 20px;
  margin: 0;
}
#section1 {
  padding: 0;
  margin: 0;
  background-color: #292929;
  margin: 0 auto;
  min-height: 100%;
  width: 100%;
  position: absolute;
}
#section2 {
  padding: 0;
  margin: 0;
  background-color: red;
  margin: 0 auto;
  min-height: 100%;
  width: 100%;
}
#section2 p {
  background-color: inherit;
  max-width: 600px;
  margin: 0 auto;
}
#section2 a {
  background-color: #2eb233;
  color: #ffffff;
  font-weight: 700;
  font-size: 20px;
  padding: 15px 40px;
}
#section2 a:hover {
  text-decoration: none;
  background-color: hsl(122, 79%, 38%);
}
<!--Header-->
<header></header>

<!--Section 1-->
<div id="section1">
  <div class="container">
    <div class="row">
      <div class="col-md-6 push-md-6">
        <div id="quote-section">
          <h1>What our customers <br> have to say...</h1>
          <div id="quote-box">
            <p><em>"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore repellat eos quas, similique tempora at magni ab cumque blanditiis labore provident quae dolorem optio nobis vel debitis quasi, rem recusandae!"</em>
            </p>
            <p id="quote-location">(Location)</p>
          </div>

          <a class="call-to-action" href="#">Find A Location</a>
          <div id="border-section-off"></div>
          <a class="call-to-action" href="#">Order Our Home Study Course</a>
        </div>
      </div>
    </div>
  </div>
</div>

<!--Section 2-->
<div id="section2">
  <h1>Who We Are...</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo quaerat odit cumque assumenda voluptates ipsum nisi, aliquid consequuntur obcaecati commodi aperiam sequi officiis illo adipisci inventore, beatae, ex ab eveniet.Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Nemo quaerat odit cumque assumenda voluptates ipsum nisi, aliquid consequuntur obcaecati commodi aperiam sequi officiis illo adipisci inventore, beatae, ex ab eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing
    elit. Consequuntur iste suscipit deserunt ipsum officia, rerum. Aliquam distinctio, quia placeat praesentium, nesciunt fugiat, provident assumenda voluptates voluptate esse totam, nam vero!Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Magni quia officia quasi voluptas animi ex delectus reiciendis, commodi, voluptatum nemo, ullam sequi saepe! Ut dicta quidem odit cupiditate. Reprehenderit, id.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero quibusdam in laborum nobis
    harum aspernatur, quidem repellat non nostrum, error dolore beatae saepe deserunt atque nemo repudiandae praesentium dolorem. Autem?</p>
</div>

2 个答案:

答案 0 :(得分：0)

根据您需要支持的浏览器，您可以从部分中删除绝对位置和最小高度并使用：

height: 100vh;

将这些部分设置为浏览器视口高度的100％。

这是一个相当新的补充，所以检查http://caniuse.com/viewport-units/

答案 1 :(得分：0)

为什么你需要第1部分是绝对的，如果你删除那个属性一切都会正常运行下面的代码：

header {
  line-height: 100px;
  height: 100px;
  width: 100%;
  background: #f3f3f3;
  position: fixed;
  top: 0;
  z-index: 2;
}
html {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  min-height: 100%;
  height: 100%;
}
body {
  background: none;
  height: 100%;
}
p {
  font-size: 20px;
  margin: 0;
}
#section1 {
  padding: 0;
  margin: 0;
  background-color: #292929;
  margin: 0 auto;
  min-height: 100%;
  width: 100%;
  //position: absolute;
}
#section2 {
  padding: 0;
  margin: 0;
  background-color: red;
  margin: 0 auto;
  min-height: 100%;
  width: 100%;
}
#section2 p {
  background-color: inherit;
  max-width: 600px;
  margin: 0 auto;
}
#section2 a {
  background-color: #2eb233;
  color: #ffffff;
  font-weight: 700;
  font-size: 20px;
  padding: 15px 40px;
}
#section2 a:hover {
  text-decoration: none;
  background-color: hsl(122, 79%, 38%);
}
<!--Header-->
<header></header>

<!--Section 1-->
<div id="section1">
  <div class="container">
    <div class="row">
      <div class="col-md-6 push-md-6">
        <div id="quote-section">
          <h1>What our customers <br> have to say...</h1>
          <div id="quote-box">
            <p><em>"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore repellat eos quas, similique tempora at magni ab cumque blanditiis labore provident quae dolorem optio nobis vel debitis quasi, rem recusandae!"</em>
            </p>
            <p id="quote-location">(Location)</p>
          </div>

          <a class="call-to-action" href="#">Find A Location</a>
          <div id="border-section-off"></div>
          <a class="call-to-action" href="#">Order Our Home Study Course</a>
        </div>
      </div>
    </div>
  </div>
</div>

<!--Section 2-->
<div id="section2">
  <h1>Who We Are...</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo quaerat odit cumque assumenda voluptates ipsum nisi, aliquid consequuntur obcaecati commodi aperiam sequi officiis illo adipisci inventore, beatae, ex ab eveniet.Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Nemo quaerat odit cumque assumenda voluptates ipsum nisi, aliquid consequuntur obcaecati commodi aperiam sequi officiis illo adipisci inventore, beatae, ex ab eveniet. Lorem ipsum dolor sit amet, consectetur adipisicing
    elit. Consequuntur iste suscipit deserunt ipsum officia, rerum. Aliquam distinctio, quia placeat praesentium, nesciunt fugiat, provident assumenda voluptates voluptate esse totam, nam vero!Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Magni quia officia quasi voluptas animi ex delectus reiciendis, commodi, voluptatum nemo, ullam sequi saepe! Ut dicta quidem odit cupiditate. Reprehenderit, id.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero quibusdam in laborum nobis
    harum aspernatur, quidem repellat non nostrum, error dolore beatae saepe deserunt atque nemo repudiandae praesentium dolorem. Autem?</p>
</div>

相关问题
最新问题