ホワイトスペース私は、単純なWebページを作成するには、ブートストラップを使用していますブラウザのHTMLドキュメント

Question

のサイズを変更すると、それは私がそれを好きなように、それがカバーする完全なデスクトップ幅

http://imgur.com/a/QcC18

だとき、ここで私は、Webページの写真を持っていますページ全体

しかし、Chromeのサイズを小さくすると、下部に空白が入りますが、理由はわかりません。

http://imgur.com/a/TuXdH

いただきましたさらに悪い私は、開発者向けツールを行い、そしてhtmlは私のdivをカバーしていることがわかりということですので、なぜ余分なスペースはありますか？あなたのCSSにこれを追加すること

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow-x: hidden; 
 
    box-sizing: border-box; 
 
} 
 
/* SECTIONS */ 
 

 
section { 
 
    padding-top: 2%; 
 
    padding-bottom: 2%; 
 
} 
 
.main { 
 
    position: relative; 
 
    background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), 
 
    /* bottom, image */ 
 
    url(img/background.jpg); 
 
    background-size: cover; 
 
    padding-bottom: 56.25%; 
 
    background-attachment: fixed; 
 
} 
 
.no-padding { 
 
    padding: 0; 
 
} 
 
/* HEADINGS */ 
 

 
.welcome-area { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translateX(-50%) translateY(-50%); 
 
    color: white; 
 
} 
 
.welcome-area h1 { 
 
    font-size: 500%; 
 
}

<section class="main"> 
 
    <div class="welcome-area"> 
 
    <h1>Hello.</h1> 
 
    <div class="row text-center btn-main"> 
 
     <button type="button" class="btn btn-primary btn-explore">EXPLORE</button> 
 

 
    </div> 
 
    <div class="row"> 
 
     <img src="css/img/face.jpg" alt="face" class="img-responsive img-face"> 
 
    </div> 
 

 

 

 
    </div> 
 
</section>

Answer 1

にページ全体を埋めるためにページを伸ばし、あなたにheight: 100%を追加してください。 cssコードhtml, bodyに追加し、eにheight: 100%; box-sizing: border-box;を追加しますsection。

編集：より良い効果のために.main要素のpadding-bottomを削除できます。

Answer 2

試してみてください。

html, body{ 
    width:100%; 
    height:100% 
} 

これは幅とheigh