全屏滚动包装不兼容浏览器

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>

固定时