Html 使flexbox行占据浏览器高度的100%_Html_Css_Flexbox

Html 使flexbox行占据浏览器高度的100%

html css

Html 使flexbox行占据浏览器高度的100%,html,css,flexbox,Html,Css,Flexbox,我的页面上有以下布局 <html> <body> <section id="wrapper"> <section id="flexbox"> <section id="page1"> </section> <section id="page2"> </section>

我的页面上有以下布局

<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没有包裹，设置为列

向每个元素添加

100vh

你可以在这里了解更多

#第1页，
#第2页{
高度：100vh；
}
#第1页{
背景：#ff0；
}
#第2页{
背景：#f00；
}

你的CSS在哪里？只要给每个部分一个高度

100vh

就行了，因为我遗漏了一个让我悲伤的父容器。谢谢