Question

我正在尝试如何在任何大小的浏览器窗口中获得覆盖100个视口的全屏介绍元素？当你开始滚动时，你可以看到主页的其余部分。请看下面的示例链接。

他们正在使用电影，但我只对一个简单的div感兴趣并使用覆盖屏幕的背景图像。我试图分析网页，我猜他们没有使用任何背景材料，而只是一个不同层的div？了解如何做到这一点会很有趣。

我做了一个简单的测试，我用很多虚拟文本填充它（在我粘贴代码之前删除了所有文本），但我似乎intre div保持全屏，我无法滚动到其余部分的页面。

<!DOCTYPE html>
<html>
<head>
<style>
#intro {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: red;
}
</style>
</head>
<body>
 <div id="intro">Intro</div>
<div class="container">Page content</div>
</body>
</html>

Answer 1

您需要使用viewport percentage lengths，vw和vh

视口百分比长度定义了相对于大小的长度视口，即文档的可见部分。只要基于Gecko的浏览器正在动态更新视口值，修改视口大小时（通过修改视图的大小）台式计算机上的窗口或通过电话转动设备或平板电脑）。

body {
  margin: 0;
}
div {
  height: 100vh;
  width: 100vw;
  max-width:100%;  /* prevent horizontal scrollbars */
  background: blue;
}
div:nth-child(odd) {
  background: yellow;
}

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

Answer 2

body {
  margin : 0;
  padding : 0;
}

.intro {
  height : 100vh;
  background-color : lightgrey;
}

<div class="intro"></div>
<div class="content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in erat et erat malesuada iaculis vel vel     nisl. Nam nunc sapien, sodales a mauris nec, faucibus aliquet elit. Suspendisse et euismod justo, vel blandit nulla. In sodales vehicula sodales. Mauris tincidunt dui justo, nec finibus purus euismod sed. Pellentesque rutrum posuere velit, sit amet sollicitudin tellus semper a. Curabitur auctor consequat quam, at aliquam felis feugiat non. In tincidunt suscipit feugiat. Etiam at nunc nec nunc fermentum tristique ut ac elit. Quisque lacinia tellus vitae dignissim pellentesque. Vivamus in sodales diam, eget posuere dui. Sed ac eros finibus, sodales sem eu, elementum libero. Nullam fringilla nec eros vel tincidunt. Vestibulum vel dolor ornare, tincidunt risus in, pretium tortor.
</div>

上面的示例显示了vh CSS3高度规则的用法。正如您所看到的，只需要将高度设置为height : 100vh，这意味着占据 V iewport H 8 的100％屏幕（屏幕名为“视口”）。

根据提供网络组件兼容性信息的caniuse.com，您可以获得所需最低设备的 IE9 + 和 Android 4.3 + 兼容性（换句话说），相当重要的设备）。

Answer 3

如果您不想使用视口百分比长度，您可以执行以下操作。

这有点重复，因为您必须设置每个内容部分的$form_id = 1; $search_criteria['field_filters'][] = array( 'key' => 'exhibitor_name' ); $sorting = array(); $total_count = 0; $result = GFAPI::count_entries( $form_id, $search_criteria, $sorting, $total_count ); echo $result;位置，但即使在IE7中也不会使用top。

vh

html {
  position: relative;
  overflow: hidden;
}

#container {
  position:fixed !important;
  top:0;
  right:0;
  bottom:0;
  left:0;
  overflow: auto;
  overflow-x: hidden;
}

#intro {
  background: red;
  position:absolute;
  top: 0;
  height: 100%;
  width: 100%;
}

div[class*="content"] {
  position:absolute;
  height: 100%;
  width: 100%;
}

.content-page-1 {
  background: green;
  top: 100%;
}
.content-page-2 {
  background: yellow;
  top: 200%;
}

Answer 4

如果你设置高度：100％;你可以滚动，而不是高度：100％放高度：自动;基于它将占据的文本。

或

如果你移除高度：100％;它也会起作用。

或

#intro{height:50%;}
.container{height:50%;}

Answer 5

您可以vh使用calc()功能。 VH采用100％高度的浏览器，我们也有标题，因此您可以通过calc减少标题的高度请添加css

#top{
  calc(100vh - 71px)  
}

希望此代码适合您

完整视口元素

5 个答案: