当为 height: 100% 的固定定位元素（如侧边栏菜单）添加 padding 时，实际高度会超出视口，导致底部内容溢出。根本原因是默认盒模型将 padding 计入总尺寸之外。解决方案是启用 box-sizing: border-box，使 padding 包含在 height/width 内部计算。
当为 `height: 100%` 的固定定位元素（如侧边栏菜单）添加 padding 时，实际高度会超出视口，导致底部内容溢出。根本原因是默认盒模型将 padding 计入总尺寸之外。解决方案是启用 `box-sizing: border-box`，使 padding 包含在 height/width 内部计算。
在 CSS 中，元素的默认盒模型（box-sizing: content-box）规定：height 和 width 仅指内容区域尺寸，而 padding、border 会额外增加到总占用空间上。因此，当你为一个 height: 100% 的 .menu 元素设置 padding: 20px 30px 时，浏览器会先按视口高度（例如 100vh）渲染内容区，再向外叠加上下各 20px 的内边距——最终总高度变为 100% + 40px，造成底部被截断或滚动溢出。
✅ 正确做法是显式声明 box-sizing: border-box：
.menu {
position: fixed;
overflow: hidden;
height: 100%;
width: fit-content;
display: flex;
flex-flow: column;
justify-content: space-between;
padding: 20px 30px;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
box-sizing: border-box; /* ✅ 关键修复：padding 现在包含在 height 内 */
}⚠️ 同时建议重置 默认外边距，避免因浏览器默认样式干扰布局：
body {
margin: 0; /* 防止 body 自带 margin 导致高度计算偏差 */
}? 进阶提示：
立即学习“前端免费学习笔记（深入）”；
- 推荐全局设置
* { box-sizing: border-box; }，让所有元素默认使用更符合直觉的盒模型； - 若需兼容旧版 IE（zoom: 1 触发 hasLayout，但现代项目通常无需考虑；
-
fit-content在部分浏览器中对position: fixed元素支持有限，如遇宽度异常，可改用width: max-content或设定具体min-width。
通过 box-sizing: border-box，height: 100% 将严格代表「包含 padding 和 border 的总高度」，从而确保顶部与底部 padding 均匀分布，内容始终完整显示于视口内——这正是实现美观、健壮侧边栏菜单的基础。
