Question

我想创建一个位于页脚元素顶部的全屏div元素。全屏div元素（#wrapper）应该有一个全屏背景图像，它应该是可滚动的，以显示放置在背景中的页脚。

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

＆＃13;

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#wrapper { 
	width: 100%;
	min-height: 100%;
	z-index: 0;
	margin-bottom: 300px;
	overflow-x: auto;

	background: url(https://wallpaperscraft.com/image/nature_waterfall_summer_lake_trees_90400_3840x2160.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	   -moz-background-size: cover;
		 -o-background-size: cover;
			background-size: cover;

	-webkit-box-shadow: 3px 3px 10px 0px rgba(0,0,0,0.3);
	   -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 {
	position: fixed;
	bottom: 0;
	z-index: -10;
	width: 100%;
	height: 300px;
	background: #555;
}

＆＃13;

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

＆＃13;

但有两个问题：

它正在使用chrome，但不适用于safari
如果向下滚动，背景图像不会移动;它不应该像现在一样被修复。

Answer 1

你只需要让容器始终保持100％的高度，然后让页脚站在下一个位置。

另外，如果你想在滚动时移动背景图像，你不需要修复nackground

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

1 个答案: