如何填充垂直格子之間的空間

Question

垂直放置四個格子，但它們之間有空間。我可以如何填充它們之間的空間。我無法找到填補空白的方法。任何人都可以幫忙這個。

<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內邊緣（這將崩塌，造成保證金的部分之間出現）並在divs上使用填充。然後刪除默認頁邊距，以便頁面中的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>