2017-02-15 10 views
0

Es gibt vier divs vertikal platziert, aber es gibt Platz unter ihnen.Wie kann ich den Raum unter ihnen füllen.Ich bin nicht in der Lage, einen Weg zu finden, um die Lücke zu füllen.Könnte jemand helfen mit Dies.Wie man den Raum zwischen dem Div vertikal füllt

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

Könnte jeder mir helfen, in diesem Vielen Dank im Voraus

Antwort

0

Prozentsatz von dem, was? Um eine prozentuale Höhe festzulegen, muss das übergeordnete Element eine explizite Höhe haben.

Here is a full answer

Kurz gesagt: Sie können nicht einen Prozentsatz Höhe festgelegt, wenn das übergeordnete Element nicht eine explizite Höhe hat. Oder, wenn das div positioniert ist, der "containing block", der der nächste Vorfahre ist, der ebenfalls positioniert wird.

Neuere Browser (> IE9) können Darstellungshöhe:

div { 
    height:100vh; 
} 
2

Sie Flexbox auf dem übergeordneten verwenden können, und flex-grow: 1 auf die Elemente, die ihnen die Eltern passen wachsen zu lassen, wenn Sie sie wollen wachsen passen Sie die Höhe des Fensters an. Entfernen Sie das einfach, wenn Sie nicht wollen, dass sie so wachsen.

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

Oder wenn Sie nur die Abschnitte gegeneinander bündig bis sein, entfernen Sie den inneren Rand auf dem h1 (was die Spanne zwischen den Abschnitten erscheinen wird kollabieren, verursacht), und verwende padding auf den divs selbst. Entfernen Sie dann die Standardränder, so dass die Elemente in den Abschnitten keinen Rand haben, der auch außerhalb des übergeordneten Elements kollabiert. Sie können das untere Padding unten auf die Elemente anwenden, wenn Sie dort ein Padding durchführen möchten.

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

+0

ich wth diese gehen würde - wenn es um die vertikale Abstand Flexbox kommt zuverlässigste ist! –

Verwandte Themen