全屏英雄圖片在移動設備上滾動時表現怪異

我的全屏英雄頭部在移動設備上無法正常工作。它滾動時改變高度，但我不知道爲什麼。下面是代碼：全屏英雄圖片在移動設備上滾動時表現怪異

<header id="header"> 
    <div class="hero"> 
     <h1>Asaxs</h1> 
     <p>gotta be kidding me</p> 
     <a href="#menu" class="btn btn-primary">Check</a> 
    </div> 
    </header> 

header{ 
    background-image:url(https://c4.staticflickr.com/4/3798/9692831755_27d2032a69_k.jpg); 
    background-size:cover; 
    position:relative; 
    height:100vh; 
    max-height: 100vh; 
    overflow: hidden; 
} 

.hero{ 
    padding-right: 60px; 
    position:absolute; 
    top:60%; 
    text-align:right; 
    width:100%; 
    color:#fff; 
    font-size:36px; 
    -ms-transform: translate(0,-50%); /* IE 9 */ 
    -webkit-transform: translate(0,-50%); /* Safari */ 
    transform: translate(0,-50%); 
}

來源

2016-08-02 Hadzik

這必須足夠我猜：

用戶代理樣式表的默認保證金的問題。將身體設置爲margin: 0;。

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
header { 
 
    background-image: url(https://c4.staticflickr.com/4/3798/9692831755_27d2032a69_k.jpg); 
 
    background-size: cover; 
 
    position: relative; 
 
    height: 100vh; 
 
    max-height: 100vh; 
 
    overflow: hidden; 
 
} 
 
.hero { 
 
    padding-right: 60px; 
 
    position: absolute; 
 
    top: 60%; 
 
    text-align: right; 
 
    width: 100%; 
 
    color: #fff; 
 
    font-size: 36px; 
 
    -ms-transform: translate(0, -50%); 
 
    /* IE 9 */ 
 
    -webkit-transform: translate(0, -50%); 
 
    /* Safari */ 
 
    transform: translate(0, -50%); 
 
}

<html> 
 

 
<head></head> 
 

 
<body> 
 
    <header id="header"> 
 
    <div class="hero"> 
 
     <h1>Asaxs</h1> 
 
     <p>gotta be kidding me</p> 
 
     <a href="#menu" class="btn btn-primary">Check</a> 
 
    </div> 
 
    </header> 
 
</body> 
 

 
</html>

來源

2016-08-02 15:42:42 kukkuz

遺憾的是它不工作。我使用normalize.css，但問題是，當我向下滾動大約80vh元素的高度隨機增長和減少。我使用Bootstrap和固定頂級導航欄，也許這是問題？ – Hadzik

ohh我看，它更好，你可以添加一個jsFiddle，以便我們可以幫助你... – kukkuz

https://jsfiddle.net/ydpuhg0p/1/ – Hadzik

全屏英雄圖片在移動設備上滾動時表現怪異

回答

相關問題