我是这个网站的新手,所以很抱歉,如果我踩到脚趾,但我一直在尝试创建一个页面,在该页面上你会遇到一个全屏标题,高度和宽度为视口的 100%,但是你仍然能够滚动到下面的内容。
完美的例子是http://www.bklynsoap.com/
我试图通过在绝对定位的 Div 上创建 100% 的高度和宽度来使用纯 CSS 来实现这一点,但这隐藏了下面的内容。
我是这个网站的新手,所以很抱歉,如果我踩到脚趾,但我一直在尝试创建一个页面,在该页面上你会遇到一个全屏标题,高度和宽度为视口的 100%,但是你仍然能够滚动到下面的内容。
完美的例子是http://www.bklynsoap.com/
我试图通过在绝对定位的 Div 上创建 100% 的高度和宽度来使用纯 CSS 来实现这一点,但这隐藏了下面的内容。
在此不需要绝对位置。您的示例使用 javascript 来更改 div 的大小和里面的内容。
你可以用纯 CSS 做到这一点
例子:
<html>
<body>
<section class="fullscreen"></section>
<section class="other-content></section>
</body>
</html>
html {
height: 100%;
}
body {
height: 100%;
}
.fullscrenn {
height: 100%;
width: 100%;
background: url('../images/fullscreen.jpg') no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}