当为高度设为 100% 的固定定位侧边栏添加 padding 时，实际占用空间会超出视口高度，导致底部内容被截断或偏移；根本解决方案是启用 box-sizing: border-box，使 padding 包含在 height 计算内。
当为高度设为 `100%` 的固定定位侧边栏添加 padding 时，实际占用空间会超出视口高度，导致底部内容被截断或偏移；根本解决方案是启用 `box-sizing: border-box`，使 padding 包含在 height 计算内。
在 CSS 默认的 box-sizing: content-box 模式下，元素的 height: 100% 仅指内容区域高度，而 padding 和 border 会额外叠加在其外部。因此，当你为 .menu 设置 height: 100% 和 padding: 20px 30px 后，总高度 = 内容高度（100vh） + 上下 padding（40px），必然超出视口，造成底部溢出或滚动条出现，正如截图中“With padding”所示。
✅ 正确做法是将盒模型切换为 border-box：
.menu {
box-sizing: border-box; /* 关键修复 */
}
该声明确保 height: 100% 包含 padding 和 border —— 即整个元素（含内边距）严格限制在 100% 高度内，上下 padding 自然对称分布，内容不再下移。
同时建议补充以下最佳实践：
- 重置
body { margin: 0 }，避免默认外边距干扰布局； -
width: fit-content在 fixed 定位下表现稳定，但若需响应式控制，可搭配min-width或max-width； -
flex: content并非标准属性（应删去或替换为flex: none），此处仅需display: flex+flex-direction: column即可满足垂直布局需求。
完整推荐样式如下：
* {
box-sizing: border-box; /* 全局统一盒模型，推荐在重置中使用 */
}
body {
margin: 0; /* 消除默认 body 外边距 */
}
.menu {
position: fixed;
top: 0;
left: 0;
overflow: hidden;
height: 100vh; /* 更语义化地替代 100%，明确基于视口 */
width: fit-content;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 20px 30px;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
/* ✅ 必须包含 */
box-sizing: border-box;
}
⚠️ 注意事项：
- 不要依赖
height: 100%而不设置父容器高度（如html, body { height: 100%; }），但对position: fixed元素，直接使用100vh更可靠； - 若后续需添加 border，
border-box同样将其纳入 height 计算，无需额外调整； - 所有现代浏览器均原生支持
box-sizing，兼容性无忧（IE8+）。
通过这一改动，你的侧边栏将真正“贴合视口”，顶部与底部 padding 均匀留白，内容居中分布，彻底解决视觉偏移问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
