Colton Colton - 3 months ago 14
CSS Question

Pushing a Div Below Another

I have a div section (#section1) that I want to remain 100% height, but to expand if need be to fit other content. The width is 100%. I have another div below that one as you scroll down the page (#section2), same principle 100% height and width, with the height expanding as needed. My problem is, the second one won't push all the way down, due to the first div being absolute. Instead it is has the first section on top of it. Does anyone have any advice? I'm using Bootstrap 4 for this project.



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>




Answer

Why you need section 1 to be absolute, if you remove that attribute everything will work fine run this code below:

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>