如何使页面部分全尺寸？

Question

下午好！

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

该部分如下所示：

本节的css规则：

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

Answer 1

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

＆＃13;

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

由于它位于绝对位置，因此您可以使用以下css将其设为100％。

element.style {
    z-index: 2;
    position: absolute;
    top: 0;
    right: 0;
    bottom:0;
    left:0;
}

请参阅此小提琴：https://jsfiddle.net/v6Lkkq4n/