全屏滾動包裝不兼容瀏覽器

Question

我想創建一個全屏div元素，它位於頁腳元素的頂部。全屏div元素（#wrapper）應該有一個全屏背景圖像，它應該可滾動以顯示放置在背景中的頁腳。

的jsfiddle：https://jsfiddle.net/tvuqzd17/

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#wrapper { 
 
\t width: 100%; 
 
\t min-height: 100%; 
 
\t z-index: 0; 
 
\t margin-bottom: 300px; 
 
\t overflow-x: auto; 
 

 
\t background: url(https://wallpaperscraft.com/image/nature_waterfall_summer_lake_trees_90400_3840x2160.jpg) no-repeat center center fixed; 
 
\t -webkit-background-size: cover; 
 
\t -moz-background-size: cover; 
 
\t \t -o-background-size: cover; 
 
\t \t \t background-size: cover; 
 

 
\t -webkit-box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.3); 
 
\t -moz-box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.3); 
 
      box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.3); 
 
} 
 

 
footer { 
 
\t position: fixed; 
 
\t bottom: 0; 
 
\t z-index: -10; 
 
\t width: 100%; 
 
\t height: 300px; 
 
\t background: #555; 
 
}

<div id="wrapper"></div> 
 
\t <footer></footer>

但這裏有兩個問題：

1. 它工作在鉻，但不是在Safari
2. 背景圖片如果s不移動慢慢地;它不應該像現在這樣修復。

Answer 1

您只需要讓容器始終保持100％的高度，然後將頁腳留下。

而且，你不需要nackground如果你想要的背景圖像移動滾動

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#wrapper { 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 0; 
 
    overflow-x: auto; 
 
    background: url(https://wallpaperscraft.com/image/nature_waterfall_summer_lake_trees_90400_3840x2160.jpg) no-repeat center center; 
 
    background-size: cover; 
 
    box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.3); 
 
} 
 
footer { 
 
    bottom: 0; 
 
    z-index: -10; 
 
    width: 100%; 
 
    height: 300px; 
 
    background: #555; 
 
}

<div id="wrapper"></div> 
 
<footer></footer>

固定時