白色空間時，我調整

我使用的引導，以創建一個簡單的網頁瀏覽器的html文件，在這裏我有網頁的照片時，它的完整的桌面寬度白色空間時，我調整

，因爲我喜歡它，它涵蓋整個頁面。

但是，當我調整Chrome的寬度到一個較小的寬度時，底部有一些空白，我不知道爲什麼？

請告訴我更慘的是我做的開發工具，並看到html只涵蓋我的DIV，所以爲什麼會出現額外的空間？

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>

來源

2017-01-19 Tetra 1

請添加height: 100%到您的css代碼爲html, body，然後添加height: 100%; box-sizing: border-box;請撥打section。

編輯：爲了達到更好的效果，您可以刪除padding-bottom的.main元素。

來源

2017-01-20 00:28:19 Joint

嘗試添加這對你的CSS：

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

這綿延的頁面充滿整個頁面寬度和HEIGH

來源

2017-01-19 23:25:02

我試過，但沒有工作不幸， –

你可以做一個jsfiddle嗎？ –

白色空間時，我調整

回答

相關問題