Question

我的页面上有以下布局。

<html>
    <body>
        <section id="wrapper">
            <section id="flexbox">
                <section id="page1">  </section>
                <section id="page2">  </section>
            </section>
        </section>
    </body>
</html>

我希望第1页和第2页的部分填满整个浏览器高度。我想查看page1然后向下滚动以查看第2页。

附加说明：

正文和html高度设置为100％。

Wrapper具有块样式。

flexbox没有换行并设置为列。

Answer 1

将100vh添加到每个元素。

您可以在此处详细了解Viewport units

#page1,
#page2 {
  height: 100vh;
}

#page1 {
  background: #ff0;
}

#page2 {
  background: #f00;
}

<section id="wrapper">
  <section id="flexbox">
    <section id="page1"></section>
    <section id="page2"></section>
  </section>
</section>

使flexbox行占用浏览器高度的100％

1 个答案: