css布局项目实战_制作一个带有侧边栏的博客模板

最稳妥的侧边栏固定+主内容自适应布局用 display: flex；.sidebar 设固定宽260px，.main 必须设 flex: 1 和 min-width: 0；侧边栏滚动需 height: calc(100vh – 64px) + overflow-y: auto；图片和代码块需 max-width: 100%、pre 加 overflow-x: auto；收起时需同步修改 .main 为 width: 100%。

侧边栏固定宽度 + 主内容自适应的 flex 布局写法

用 display: flex 是目前最稳妥的方案，避免浮动或绝对定位带来的流式断裂问题。主区域必须设 flex: 1，否则在小屏下会溢出或塌陷。

.container {   display: flex; } .sidebar {   width: 260px; /* 固定宽度，不建议用 % */ } .main {   flex: 1; /* 关键：撑满剩余空间 */   min-width: 0; /* 防止内容过长时 flex 项不收缩 */ }

• 别给 .main 设 width: 100% —— 它会和 .sidebar 冲突，导致换行
• min-width: 0 必须加，否则内部 text-overflow: ellipsis 或长单词可能失效
• 如果侧边栏需要响应式隐藏，用 flex: none + display: none 组合，不要只靠 display

侧边栏滚动独立于主内容的 overflow 处理

用户常误以为给 .sidebar 加 overflow-y: auto 就够了，但实际需配合高度约束，否则滚动条不会出现。

.sidebar {   height: calc(100vh - 64px); /* 减去 header 高度 */   overflow-y: auto; } .sidebar::-webkit-scrollbar {   width: 6px; } .sidebar::-webkit-scrollbar-thumb {   background: #ccc; }

• 高度必须是「可计算值」，height: 100% 在 flex 容器里通常无效
• 用 calc() 比 js 动态算更轻量，也避免 SSR 渲染错位
• 滚动条样式仅在 WebKit 内核生效；若需全平台统一，得用第三方库（如 simplebar）

博客正文图片与代码块的宽度越界问题

markdown 渲染后的 和

 默认按原始尺寸显示，极易突破 .main 宽度，尤其在移动设备上。
.main img, .main pre {   max-width: 100%;   box-sizing: border-box; } .main pre {   overflow-x: auto; /* 横向滚动代替折行 */   padding: 1rem; }

 max-width: 100% 必须作用于具体元素，不能只写在 .main 上
 overflow-x: auto 对 
 更友好 —— 保留缩进和语法高亮完整性
如果用了 Prism.js，注意它生成的  嵌套层级深，选择器要写全：.main pre code
移动端侧边栏收起后内容区宽度未重占的问题
用 transform: translateX(-100%) 隐藏侧边栏时，.main 的宽度不会自动扩展，视觉上仍留白。
立即学习“前端免费学习笔记（深入）”；
.sidebar.collapsed {   transform: translateX(-100%); } .container.sidebar-collapsed .main {   flex: none;   width: 100%; }


不能只动侧边栏，必须同步调整 .main 的 flex 行为 —— 否则它还“记得”原来要让出 260px
用 class 切换比 media query 更可控，便于配合 JS 控制按钮状态
动画过渡要加在 .sidebar 上，但 transition: transform .3s ease，别加在 width 上（会触发重排）

侧边栏布局真正难的不是怎么“放上去”，而是各种边界场景下的行为一致性：小屏折叠后是否留白、长代码块是否截断、图片在 Retina 屏是否模糊、滚动是否卡顿……这些细节堆起来，才决定用户愿不愿意多看两篇文章。