【发布时间】：2017-01-04 06:55:42
【问题描述】：
我有一个 div 部分 (#section1)，我想保持 100% 的高度，但如果需要可以扩展以适应其他内容。宽度为 100%。当您向下滚动页面 (#section2) 时，我在其下方有另一个 div，相同的原则是 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>【问题讨论】：
-
只删除第一部分的
position:absolute- 它没有任何作用。 -
如果我的回答不符合您的需要，请告诉我