使用 vh 单位替代 max-height 配合 height: 100%，可使固定定位容器中的内容区在保持响应式高度的同时正确触发滚动条，避免父容器溢出或高度失效问题。
使用 `vh` 单位替代 `max-height` 配合 `height: 100%`，可使固定定位容器中的内容区在保持响应式高度的同时正确触发滚动条，避免父容器溢出或高度失效问题。
在构建底部固定（position: fixed）且可展开/收起的内容面板时，一个常见痛点是：当为容器设置 max-height: 50% 后，内部内容超出时无法正常显示滚动条——尤其在小屏幕下。根本原因在于：max-height 本身不触发块级格式化上下文（BFC）的严格高度约束，而 height: 100% 在无明确高度祖先时会计算失败（即“高度坍塌”），导致 overflow: auto 失效。
✅ 正确解法是用视口单位 vh 直接定义内容区高度，并解除对 .container 的 max-height 限制：
.container {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #4a90e2;
/* 移除 max-height —— 它在此场景下与 height 冲突且不可靠 */
}
.content {
height: 46vh; /* 关键：预留空间给 .toggle 元素（如 4px 高度 toggle ≈ 减 4vh）*/
overflow-y: auto;
overscroll-behavior-y: contain; /* 可选：防止滚动穿透到背景页面 */
}? 提示：
.content的height值需根据.toggle元素实际高度微调。例如若 toggle 高 32px，在 100vh 视口中占约3.2vh（以 1000px 高度为基准），则content建议设为46–47vh，确保整体容器高度≈50vh。
JavaScript 控制逻辑保持简洁稳定，无需修改 DOM 结构：
const content = document.querySelector(".content");
const toggle = document.querySelector(".toggle");
toggle.addEventListener("click", () => {
const isShown = content.style.display !== "none";
content.style.display = isShown ? "none" : "block";
toggle.textContent = isShown ? "▲" : "▼";
});⚠️ 注意事项：
- 避免在
.container上同时设置max-height和依赖其子元素height: 100%，二者在fixed定位下易产生计算歧义； - 使用
vh而非%，因fixed元素的百分比高度相对于初始包含块（通常是视口），但受父级无明确高度影响，vh更可靠； - 若需支持旧版 Safari（-webkit-overflow-scrolling: touch 提升 iOS 滚动体验；
- 建议为
.content添加padding和box-sizing: border-box，确保内边距不撑破预设高度。
最终效果：容器始终锚定屏幕底部，展开时内容区占据约 50vh 高度（含 toggle 占位），内容超长时精准出现纵向滚动条，且 toggle 按钮自身不参与滚动——完全满足响应式、用户友好与视觉一致性需求。
