Abschnitt Hintergrund übergelaufen in einen anderen Abschnitt

Question

Ich entschuldige mich im Voraus für diese etwas längere Erklärung. Ich versuche, eine Website wie http://melaniedaveid.com/ zu erstellen, um meine Codierungsfähigkeiten zu verbessern. Ich habe die erste Sektionsseite erstellt und es ist großartig geworden. Aber als ich einen anderen Abschnitt hinzufügte, füllte der vorherige Abschnitt nicht die ganze Seite mehr (Bild: http://imgur.com/a/EbUKn).

Um dies zu lösen ich die volle Höhe des ersten Abschnitte ID gab:

#header { 
height: 100%;} 

Dies das Problem behoben (http://imgur.com/a/BlckC), aber jetzt, wenn ich meinen Browser den zweiten Abschnitt über, fließt in meine ersten Größe ändern, bedeckt der Text (http://imgur.com/a/C1jED). Irgendwelche Vorschläge/Leads würden sehr geschätzt werden!

body { 
 
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('/img/roses.jpg') no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    font-size: 20px; 
 
    height: 100vh; 
 
} 
 

 
/*------------------------------------------------ HOME PAGE ------------------------------------------------------------------*/ 
 

 
/*------------------------------ 
 
HEADING TEXT 
 
-------------------------------*/ 
 
.name h1 { 
 
    font-family: 'Muli', sans-serif; 
 
    font-size: 500%; 
 
    font-weight: 300; 
 
    text-align: center; 
 
    padding-top: 10%; 
 
    color: #ecf0f1; 
 
    font-family: 'Cormorant Garamond', serif; 
 
} 
 

 
.name p { 
 
    font-family: 'Play', sans-serif; 
 
    font-size: 130%; 
 
    text-align: center; 
 
    padding-top: 5%; 
 
    color: #ecf0f1; 
 
    font-family: 'Merriweather', serif; 
 
    font-weight: 300; 
 
    padding-right: 10%; 
 
    padding-left: 10%; 
 
} 
 

 
/*------------------------------ 
 
Nav Bar 
 
-------------------------------*/ 
 

 
.navigation p { 
 
    display: inline; 
 
    font-family: 'Play', sans-serif; 
 
    color: #ecf0f1; 
 
} 
 

 
.navigation { 
 
    text-align: center; 
 
    padding-top: 15%; 
 
} 
 

 
.contents, 
 
.contents:hover { 
 
    text-decoration: none; 
 
    color: #ecf0f1; 
 
    font-family: 'Delius Unicase', cursive; 
 
} 
 

 
/*------------------------------------------------ ABOUT PAGE ------------------------------------------------------------------*/ 
 

 
/*------------------------------ 
 
About Heading 
 
-------------------------------*/ 
 

 
#about { 
 
    background-color: black; 
 
    background-size: cover; 
 
    height: 100%; 
 

 
} 
 

 
#header { 
 
    height: 100%; 
 
}

<section id="header"> <!------------------------- HOME PAGE --------------------------> 
 

 

 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-xs-12 name"> 
 
     <h1>Temple Naylor</h1> 
 
     </div> 
 
    </div> 
 

 
    <div class="row"> 
 
     <div class="col-xs-12 name"> 
 
     <p>I create Web-designs with a sense of Feng-Shui in mind; resulting for a intuitive, responsive, harmonious, experience for users across the world.</p> 
 
     </div> 
 
    </div> 
 

 
    <div class="row"> 
 
     <div class="col-xs-12 navigation hidden-sm-down"> 
 
     <p><a class="contents" href="#">ABOUT</a>/</p> 
 
     <p><a class="contents" href="#">WORK</a>/</p> 
 
     <p><a class="contents" href="#">CONTACT</a>/</p> 
 
     <p><a class="contents" href="#">PHOTOGRAPHY</a></p> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 

 
</section> 
 

 

 
<section id="about"> <!------------------------- ABOUT PAGE --------------------------> 
 

 

 
    <div class="container"> 
 
    <div class="row about"> 
 
     <div class="col-md-6"> 
 
     <p class="big-text"></p> 
 
     </div> 
 
    </div> 
 

 
    <div class="row"> 
 
     <div class="col-md-6 about-text"> 
 
     <p >Yup</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section>

Answer 1

Änderung #header Höhe auf min-height:

#header { 
    min-height: 100%; 
} 

Answer 2

Sie können CSS vh Eigenschaft für diese.

#header { 
    height: 100vh; 
} 

hier ist mehr Infos über css units. Hoffe das hilft dir.