如何将CSS Flexbox移动扩展为占满屏幕右半区全高

全局基础样式修复（解决全高度失效问题） #

先清除浏览器默认样式偏差，避免高度、宽度计算出现误差：

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

html,
body {
  /* 根节点占满整个视口高度，是后续百分比高度生效的基础 */
  height: 100%;
  overflow-x: hidden;
}

目标Flex容器定位调整 #

对需要放置在屏幕右侧的Flex弹性盒做属性修改，实现从屏幕水平中心向右铺满、高度撑满整个视口的效果：

/* 替换你现有Flex容器的对应样式 */
.flex-container {
  /* 锚定到视口区域，脱离普通文档流，避免位置偏移 */
  position: fixed;
  top: 0;
  /* 定位起点设为视口水平中心 */
  left: 50%;
  /* 占满整个视口高度 */
  height: 100vh;
  /* 占满从中心到屏幕右边缘的全部宽度 */
  width: 50vw;

  /* 你原有写好的Flex内部排布逻辑完全不需要改动，继续保留即可 */
  display: flex;
  /* 比如原有的flex-direction、align-items、justify-content规则全部沿用 */
}

非固定定位的替代实现 #

如果不想使用position: fixed，可以在全局最外层容器上用两栏网格布局实现相同视觉效果，这种方式更适配页面需要滚动的场景：

.page-root {
  display: grid;
  /* 把视口均匀切分为等宽的左右两栏 */
  grid-template-columns: 1fr 1fr;
  height: 100vh;
}

• 左栏预留放置页面其他内容
• 右栏直接嵌入原有Flex容器，容器会自动适配右栏的全高、全宽，不需要额外写定位属性

常见踩坑提醒 #

• 不要遗漏box-sizing: border-box设置：否则给Flex容器添加内边距的时候，实际宽度会超出50%，意外侵占左半屏空间
• 不要单独给Flex容器写height: 100%：如果父级、祖父级元素没有逐层设置高度，百分比高度不会生效，这也是之前无法实现全高的核心原因
• 如果需要适配移动端小屏，可以把宽度规则改成响应式断点，比如屏幕宽度小于768px时设置left:0; width:100%，避免内容显示拥挤

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