html - 如何使页面部分全尺寸？

Question

下午好!

我必须将着陆页的每个部分拉伸(stretch)到整页大小。在我的情况下是否可以仅使用 CSS 规则？

该部分如下所示:

本节的CSS规则:

element.style {
    width: 100%;
    height: 100%;
    z-index: 2;
    position: absolute;
    left: 0;
    top: 0;
}

Answer 1

您可以使用 100vh 将高度设置为视口(viewport)的高度。

/* for demo only ... */

body {
  margin: 0;
}
div:nth-child(1) {
    background: red;
}
div:nth-child(2) {
    background: green;
}
div:nth-child(3) {
    background: blue;
}

/* Important bit... */

div {
    height: 100vh;
}

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