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/

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

1 个答案: