セクションの背景が他のセクションにあふれている

Question

このやや長い説明のために、事前にお詫び申し上げます。コーディング能力を向上させるために、http://melaniedaveid.com/のようなWebサイトを作成しようとしています。私は最初のセクションのページを作成し、それは偉大な判明した。しかし、私が別のセクションを追加したとき、前のセクションはもうページ全体を埋めていませんでした（画像：http://imgur.com/a/EbUKn）。これは、問題（http://imgur.com/a/BlckC）が、今私は最初に私のブラウザ流れの上に第二のセクションのサイズを変更する際に固定

#header { 
height: 100%;} 

、カバー：私は最初のセクションのIDへの完全な高さを与え、これを解決するために

テキスト（http://imgur.com/a/C1jED）。どんな提案/リードも高く評価されます！あなたはこのために、CSS vhプロパティを使用することができます

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

変更＃ヘッダーの高さが最小高さ：私は仕事のような種類をした場合

#header { 
    min-height: 100%; 
} 

Answer 2

。

#header { 
    height: 100vh; 
} 

ここにはcss unitsに関する詳細情報があります。これがあなたを助けることを願っています