如何让Flexbox行占满浏览器高度？实现page1、page2全屏滚动

嗨，我来帮你解决这个全屏滚动section的问题！要让page1和page2各自填满浏览器视口高度，实现滚动切换的效果，只需要给现有结构补充几行CSS属性就行，具体方案如下：

先给你看包含CSS的完整HTML代码，直接用就能生效：

<html>
<head>
  <style>
    html, body {
      height: 100%;
      margin: 0; /* 清除默认边距，避免不必要的滚动条或留白 */
      padding: 0;
    }

    #wrapper {
      display: block; /* 保持你原本设置的block样式 */
      height: 100%; /* 让wrapper继承视口高度 */
    }

    #flexbox {
      display: flex;
      flex-direction: column; /* 关键：把Flex主轴改成垂直方向，子元素上下排列 */
      flex-wrap: nowrap; /* 保持你设置的不换行属性 */
      height: 100%; /* 让flexbox占满wrapper的高度 */
    }

    #page1, #page2 {
      flex: 0 0 100vh; /* 固定占满100视口高度，不收缩不拉伸 */
      /* 也可以用 height: 100%; 效果一致，因为父级flexbox高度是100% */
    }

    /* 下面是可选的背景色，方便区分两个section */
    #page1 { background-color: #e3f2fd; }
    #page2 { background-color: #f1f8e9; }
  </style>
</head>
<body>
<section id="wrapper">
<section id="flexbox">
<section id="page1">
  <h2>这是Page 1的内容</h2>
</section>
<section id="page2">
  <h2>这是Page 2的内容</h2>
</section>
</section>
</section>
</body>
</html>

我来拆解一下核心的修改点：

• 调整Flexbox方向：默认Flexbox是水平排列（flex-direction: row），改成column后，page1和page2才会垂直叠放，这是实现滚动切换的基础。
• 确保高度继承：给#wrapper和#flexbox都设置height: 100%，让它们从html/body继承视口高度，这样子元素才能基于这个高度设置全屏尺寸。
• 固定子元素高度：用flex: 0 0 100vh让每个section固定占满100视口高度（100vh），其中：
  • 0（flex-grow）：不允许元素拉伸超出视口高度
  • 0（flex-shrink）：不允许元素收缩小于视口高度
  • 100vh：固定基础尺寸为整个视口高度

如果不想用vh单位，换成height: 100%也完全可行，因为父级#flexbox的高度已经是100%，子元素会自动继承这个高度。

内容的提问来源于stack exchange，提问作者rawturtle