Cargo：如何让移动端stacked pages各占25%高度填满全屏？

给你两种新手能快速上手的简单实现方式：

方法一：Flex布局（推荐，更灵活） #

这种方式会自动让4个区块平分整个屏幕高度，不用手动计算百分比：

1. 基础HTML结构示例 #

<!-- 用父容器包裹四个页面区块 -->
<div class="stack-container">
  <div class="page-item" style="background-color: #ff5733;">页面1</div>
  <div class="page-item" style="background-color: #33ff57;">页面2</div>
  <div class="page-item" style="background-color: #3357ff;">页面3</div>
  <div class="page-item" style="background-color: #ff33a6;">页面4</div>
</div>

2. 对应的CSS代码 #

/* 重置浏览器默认边距和内边距，避免影响布局 */
* {
  margin: 0;
  padding: 0;
  /* 确保内边距不会撑大元素尺寸 */
  box-sizing: border-box;
}

/* 让html和body占满整个屏幕高度 */
html, body {
  height: 100%;
}

/* 父容器设置为垂直flex布局，高度占满屏幕 */
.stack-container {
  display: flex;
  flex-direction: column; /* 子元素垂直排列 */
  height: 100vh; /* 100vh = 整个屏幕的高度 */
}

/* 每个页面区块自动平分父容器的高度 */
.page-item {
  flex: 1; /* 每个区块分配到相等的空间 */
  /* 可选：加内边距让内容不贴边 */
  padding: 1rem;
}

方法二：固定百分比高度 #

如果不想用flex，直接给每个区块设置25%高度：

CSS代码（HTML结构和上面一致） #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

.stack-container {
  height: 100vh;
}

.page-item {
  height: 25%; /* 每个区块占父容器高度的25% */
  padding: 1rem;
}

两种方法都能让四个彩色区块刚好填满整个屏幕，你直接把代码套到自己的项目里，替换示例里的背景色和内容即可。

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