Как заполнить пространство между div вертикально

Question

Есть четыре divs, расположенных вертикально, но между ними есть пространство. Как я могу заполнить пробел среди них. Я не могу найти способ заполнить пробел. Может ли кто-нибудь помочь с это.

<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%; 
} 

Может ли мне помочь в этом Заранее спасибо

Answer 1

Процент что? Чтобы установить процентную высоту, ее родительский элемент должен иметь явную высоту.

Here is a full answer

Вкратце: Вы не можете установить высоту в процентах, если родительский элемент не имеет явную высоту. Или, если div позиционируется, «содержащий блок», который также является ближайшим предком.

Новых браузеров (> IE9) можно использовать видовую высоту:

div { 
    height:100vh; 
} 

Answer 2

Вы можете использовать Flexbox на родителях, и flex-grow: 1 по пунктам, чтобы заставить их расти, чтобы соответствовать родителю, если вы хотите, чтобы расти установите высоту окна. Просто удалите это, если вы не хотите, чтобы они так расти.

* {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>

Или если вы просто хотите участки, чтобы быть вровень против друг друга, снимите внутреннюю маржу на h1 (который будет коллапс, в результате чего запас появляться между секциями), и используйте прокладку на самих div. Затем удалите поля по умолчанию, поэтому элементы p в разделах не имеют поля, которые также рушится вне родителя. Вы можете применить нижнюю прокладку к нижней части элементов, если вы хотите заполнить ее.

* {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>