有页面的打开部分的全部浏览器高度，所有其他部分定义的高度

Question

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

到目前为止，经过多次试验和错误，我已经能够得到第一个块div是全屏，但所有其他块堆栈在第一个，所以他们是不可见的。我想做的是为第一个块是全屏，但允许用户滚动通过下面的所有其他块。

理想情况下，我一直在尝试用纯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与视口高度的100%相同。

下面是更新后的演示:https://jsfiddle.net/bf70h42y/