代码之家 › 专栏 › 技术社区 › rawturtle

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

flexbox css html

rawturtle · 技术社区 · 7 年前

我的页面上有以下布局。

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

1 回复 | 直到 7 年前

Adam ZBWR 7 年前

添加 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>

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

8 月前

Mass · 如何在Tailwind CSS v4中创建配置

9 月前

magenta placenta · 将css变量合并为一个变量

9 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

9 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

9 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

9 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

9 月前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

9 月前

Luckkks · 过渡色工作不正常

9 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

9 月前