javascript - 具有页面完整浏览器高度的开头部分，所有其他部分定义的高度。

Question

我有一个网站，它由一堆不同高度但全宽的 block 组成。我想做的是让这些 block 中的第一个成为浏览器窗口的完整高度和宽度，所有其他 block 都具有设置的高度，就像这个网站:http://savant.com

到目前为止，经过多次试验和错误，我能够让第一个 block div 成为全屏，但所有其他 block 都堆叠在第一个 block 下面，因此它们不可见。我想要做的是让第一个 block 全屏显示，但允许用户滚动浏览下面的所有其他 block 。

理想情况下，我一直在尝试使用纯 css 来实现这一点，但我什至不确定这是否可行，所以我也对 JS 持开放态度。

我在这里做了一个 JSfiddle 问题:https://jsfiddle.net/kff1swjf/

我的标记是这样的:

<div id="section1">Section 1</div><!--this one should open full height and width of the browser window-->
<div id="section2">Section 2</div>
<div id="section3">Section 3</div>
<div id="section4">Section 4</div>
<div id="section5">Section 5</div>

这是我的CSS:

#section1 {
    background: red;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
}

#section2 {
    background: blue;
    height: 150px;
}

#section3 {
    background: yellow;
    height: 300px;
}

#section4 {
    background: green;
    height: 200px;
}

#section5 {
    background: purple;
    height: 175px;
}

Answer 1

您需要做的就是将 #section1 的 CSS 更改为以下内容:

#section1 {
    background: red;
    width:100%;
    height:100vh;
}

这将使用 100vh 作为高度，其中 100vh 与视口(viewport)高度的 100% 相同。

这是带有更新的演示:https://jsfiddle.net/bf70h42y/