divの間のスペースをどのように埋めるのですか

Question

垂直に4つのdivがありますが、それらの間にスペースがあります。どのようにそれらのスペースを埋めることができますか。ギャップを埋める方法を見つけることができません。この。

<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が配置されている場合は、最も近い祖先でもある「包含ブロック」も配置されます。あなたがそれらをに成長したい場合は、それらが親に合わせて成長させるために項目に

div { 
    height:100vh; 
} 

Answer 2

あなたが親にフレキシボックスを使用することができます

、およびflex-grow: 1：

新しいブラウザ（> IE9）は、ビューポートの高さを使用することができます窓の高さに合わせてください。あなたがそれらのように成長しないようにする場合は、単にそれを削除します。

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