轮播图高度设为100vh后内容被截断
直接给 .carousel 或 .carousel-item 设置 height: 100vh 很容易导致底部被浏览器地址栏、iOS Safari 底部工具栏遮挡，尤其在移动端。这是因为 vh 单位基于初始视口（initial viewport），而某些浏览器（如 Safari on iOS）在滚动或弹出软键盘时会动态调整视口高度，但 vh 值不会实时更新。
解决思路是避免纯依赖 100vh，改用更稳定的布局方式：
- 给
.carousel设min-height: 100vh，而非固定height，保留内容撑开空间的余地 - 确保父容器无意外
overflow: hidden或transform（后者会创建新层叠上下文并干扰 vh 行为） - 对
.carousel-item img使用object-fit: cover+width: 100%; height: 100%，防止拉伸变形
Bootstrap 5 轮播图全屏时图片不铺满整个容器
默认 .carousel-item 是 flex 容器，但子元素（如 <img>）若未显式设置尺寸，不会自动填满。常见错误是只加 height: 100vh 到外层，却忽略图片自身的渲染规则。
关键 CSS 配置如下：
.carousel {
min-height: 100vh;
}
.carousel-item {
height: 100vh;
}
.carousel-item img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
注意：如果图片作为背景图使用（比如通过 background-image），则需配合 background-size: cover 和 background-position: center，且容器必须有明确宽高。
移动端 Safari 下轮播图高度忽大忽小
这是典型的 iOS Safari 视口缩放 bug —— 地址栏收起/展开时，100vh 不重算，导致轮播图“跳变”。不能靠 JS 监听 resize 粗暴重设高度（触发频繁、性能差）。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
更稳妥的做法：
- 用
min-height: 100dvh替代100vh（dvh= dynamic viewport height，Chrome 105+ / Safari 16.4+ 支持） - 降级方案：JS 初始化时读取
document.documentElement.clientHeight并写入自定义 CSS 变量，后续用height: var(--full-height) - 避免在
.carousel上同时使用transform和height: 100vh，二者叠加在 Safari 中易引发渲染异常
Bootstrap 4 和 5 的轮播图全屏写法差异
Bootstrap 5 移除了 jQuery 依赖，内部结构微调：.carousel-inner 默认是 flex 容器，而 Bootstrap 4 是 block。这意味着在 BS5 中，若未重置 .carousel-item 的 flex 属性，可能因对齐问题导致高度计算偏差。
BS5 必须显式设置：
.carousel-item {
flex: 0 0 100%;
max-width: 100%;
height: 100vh;
}
BS4 则更宽松，但需注意其 .carousel-item.active 有 display: block，若用 visibility: hidden 替代 display 控制显隐，会导致高度塌陷。
跨版本兼容建议：统一用 min-height + height: auto 组合，再配合 object-fit 控制媒体内容，比死磕 100vh 更可靠。
真正难的不是写几行 CSS，而是判断当前环境是否支持 dvh、是否启用了缩放、是否有第三方插件注入了 transform 样式——这些都会让 vh 失效，且错误表现非常隐蔽。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
