How to fill the space between the div vertically

Question

There are four divs placed vertically but there is space among them.How can I fill the space among them.I am unable to find a way to fill the gap.Could anyone help with this.

    <div class="pageTwo">
  <h1 class="text-center" style="font-family: 'Julius Sans One', sans-serif;margin-top:100px !important;">Works</h1>
  <div class="block-works">
    <p class="work">We at Good <span class="letter-T">T</span>ree production watch movies at full time. Watching movies at 24 X 7 is our duty and reviewing them is our homework. </p>
  </div>
 </div>
 <div class="pageThree">
 <h1 class="text-center" style="font-family: 'Julius Sans One', sans-serif;margin-top:100px !important;">About Us</h1>
  <div class="block-about-us">
    <p class="work">We at Good <span class="letter-T">T</span>ree production are two bunch of gladiators worshipping movies.</p>
  </div>
 </div>
  <div class="pageFour">
  <h1 class="text-center" style="font-family: 'Julius Sans One', sans-serif;margin-top:50px">Contact Us</h1>
  <div class="block-contact-us text-center"> 
    <p class="work">
      Like us on </br>
      <a>
         <span class="fa fa-facebook-official" style="font-size: 40px;text-align: center;"></span>
      </a>
    </p></br>
    <p class="work" style="">
      Follow us on </br>
      <a>
         <span class="fa fa-twitter" style="font-size: 40px;text-align: center;"></span>
      </a>
    </p>
  </div>
 </div>

CSS:

.pageOne{
      background-size:cover;
    background-color:#DCF5F4;
    height: 60%;
}
.pageTwo{
    background-color: rgb(185, 196, 234);
    background-size:cover;
    height:80%;
    width: 100%;
    margin-top:-3.7%;
}
.pageThree{
    background-color: #F3A0A0;
    background-size:cover;
    height:60%;
}
.pageFour{
  background-color:#B8F2DF;
  background-size:cover;
  height:80%;
}

Could any help me out in this Thanks in Advance

Michael Coker · Answer 1 · 2017-02-15T17:09:15.137

You can use flexbox on the parent, and flex-grow: 1 on the items to make them grow to fit the parent if you want them to grow to fit the height of the window. Just remove that if you don't want them to grow like that.

* {margin:0;padding:0;}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

body > div {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.pageOne {
  background-size: cover;
  background-color: #DCF5F4;
}

.pageTwo {
  background-color: rgb(185, 196, 234);
  background-size: cover;
}

.pageThree {
  background-color: #F3A0A0;
  background-size: cover;
}

.pageFour {
  background-color: #B8F2DF;
  background-size: cover;
}

<div class="pageTwo">
  <h1 class="text-center" style="font-family: 'Julius Sans One', sans-serif;">Works</h1>
  <div class="block-works">
    <p class="work">We at Good <span class="letter-T">T</span>ree production watch movies at full time. Watching movies at 24 X 7 is our duty and reviewing them is our homework. </p>
  </div>
</div>
<div class="pageThree">
  <h1 class="text-center" style="font-family: 'Julius Sans One', sans-serif;">About Us</h1>
  <div class="block-about-us">
    <p class="work">We at Good <span class="letter-T">T</span>ree production are two bunch of gladiators worshipping movies.</p>
  </div>
</div>
<div class="pageFour">
  <h1 class="text-center" style="font-family: 'Julius Sans One', sans-serif;">Contact Us</h1>
  <div class="block-contact-us text-center">
    <p class="work">
      Like us on </br>
      <a>
        <span class="fa fa-facebook-official" style="font-size: 40px;text-align: center;"></span>
      </a>
    </p>
    </br>
    <p class="work" style="">
      Follow us on </br>
      <a>
        <span class="fa fa-twitter" style="font-size: 40px;text-align: center;"></span>
      </a>
    </p>
  </div>
</div>

Or if you just want the sections to be flush up against one another, remove the inner margin on the h1 (which will collapse, causing the margin to appear between the sections), and use padding on the divs themselves. Then remove default margins, so the p elements in the sections don't have margin that collapse outside of the parent, too. You can apply bottom padding to the bottom of the elements if you want padding there.

* {margin:0;}

.pageOne {
  background-size: cover;
  background-color: #DCF5F4;
}

.pageTwo {
  background-color: rgb(185, 196, 234);
  background-size: cover;
  padding-top: 100px;
}

.pageThree {
  background-color: #F3A0A0;
  background-size: cover;
  padding-top: 100px;
}

.pageFour {
  background-color: #B8F2DF;
  background-size: cover;
  padding-top: 50px;
}

<div class="pageTwo">
  <h1 class="text-center" style="font-family: 'Julius Sans One', sans-serif;">Works</h1>
  <div class="block-works">
    <p class="work">We at Good <span class="letter-T">T</span>ree production watch movies at full time. Watching movies at 24 X 7 is our duty and reviewing them is our homework. </p>
  </div>
</div>
<div class="pageThree">
  <h1 class="text-center" style="font-family: 'Julius Sans One', sans-serif;">About Us</h1>
  <div class="block-about-us">
    <p class="work">We at Good <span class="letter-T">T</span>ree production are two bunch of gladiators worshipping movies.</p>
  </div>
</div>
<div class="pageFour">
  <h1 class="text-center" style="font-family: 'Julius Sans One', sans-serif;">Contact Us</h1>
  <div class="block-contact-us text-center">
    <p class="work">
      Like us on </br>
      <a>
        <span class="fa fa-facebook-official" style="font-size: 40px;text-align: center;"></span>
      </a>
    </p>
    </br>
    <p class="work" style="">
      Follow us on </br>
      <a>
        <span class="fa fa-twitter" style="font-size: 40px;text-align: center;"></span>
      </a>
    </p>
  </div>
</div>

I'd go wth this - when it comes to vertical spacing flexbox is most reliable! — Frazer Wilson, Feb 15 '17 at 17:16

score 0 · Answer 2 · edited May 23 '17 at 10:29

Percentage of what? To set a percentage height, its parent element must have an explicit height.

Here is a full answer

In brief: You can't set a percentage height when the parent element doesn't have an explicit height. Or, if the div is positioned, the ‘containing block’, which is the nearest ancestor to also be positioned.

Newer browsers (> IE9) can use viewport height:

div {
    height:100vh; 
}

How to fill the space between the div vertically

2 Answers2