Question

我是这个网站的新手，所以如果我踩到脚趾，我会道歉但我一直在努力创建一个页面，在那里你会遇到全屏标题，高度和宽度为视口的100％，但您仍然可以滚动到下面的内容。

这方面的完美例子是http://www.bklynsoap.com/

我试图通过在绝对定位Div上创建100％高度和宽度来实现纯CSS，但这隐藏了下面的内容。

Answer 1

不需要绝对的位置。您的示例使用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;
}

如何创建全屏div直到滚动？

1 个答案: