使Flexbox行占據瀏覽器高度的100％

Question

我的頁面上有以下布局。

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

我希望部分page1和page2填充整個瀏覽器高度。 我想查看第1頁，然后向下滾動以查看第2頁。

補充筆記：

正文和html高度設置為100％。

包裝器具有塊樣式。

flexbox沒有包裝，並設置為列。

Answer 1

將100vh添加到每個元素。

您可以在此處了解更多有關視口的信息

 #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 個解決方案

解決方案1
1 已采納 2018-04-19 01:21:45

使Flexbox行占據瀏覽器高度的100％

問題描述

1 個解決方案

解決方案1 1 已采納 2018-04-19 01:21:45

解決方案1
1 已采納 2018-04-19 01:21:45