简介CSS布局中右侧固定宽度、左侧自适应的页面结构是前端开发常见需求博客园默认主题即采用该模式。这份PDF教程面向Web前端初学者与需要快速搭建两侧布局的开发人员以简洁案例讲解如何让侧边栏固定、主体区随视口自适应。内容覆盖浮动与margin配合、绝对定位、float与margin结合等多种实现思路并针对HTML中content需置于sidebar之前、清除浮动影响、避免footer错位等细节给出具体处理方法配合完整CSS代码与结构说明可帮助读者理解不同方案的适用条件与局限性进阶了解CSS Grid与Flexbox在响应式布局中的优势。资源为单个PDF文档体积仅129KB携带方便具备基础CSS语法知识即可直接学习。已有1527人学习下载适合日常查阅与实战参考。1. 右侧固定、左侧自适应一个看似简单却高频翻车的 css 布局css 实现右侧固定宽度、左侧宽度自适应听起来就是两栏布局里最普通的一种但真放进生产页面踩过的坑比想象中多。左侧并不是真的“自己会算宽度”而是右侧占掉固定值之后剩余空间全部交给左侧这个剩余空间怎么计算、父容器有多宽、中间留不留间距任何一个条件变了结果都可能整行翻车。这篇文章会把三种常见做法——flex、grid、float加calc——各自的边界讲清楚给出可以直接抄的参数和排查路径适合写页面的人、调样式的人也适合准备前端面试的开发者。2. 用 flex 实现右侧固定左侧自适应最小代码与三个必调参数2.1 为什么先选 flex主轴方向与 flex-shrink 的默认行为遇到“右侧固定、左侧自适应”的第一反应我一般会直接选 flex因为它把“剩余空间分配”这件事做成了属性而不是靠人肉计算宽度。flex 容器默认的主轴方向是水平方向也就是flex-direction: row子项会从左往右排右侧固定宽度、左侧自适应实际上是在问主轴剩余空间怎么分。很多人在这里栽跟头是因为没搞懂 flex-shrink 的默认值。flex 子项默认flex-shrink: 1意思是空间不够时所有子项都会收缩。如果你只是给右侧写了width: 320px忘记写flex-shrink: 0当父容器变窄时右侧那 320px 会被压缩固定宽度就失效了。这也是“右侧固定”这个需求里最容易翻车的点宽度写了但没有告诉浏览器“这个宽度不许缩”。反直觉的地方在于flex 布局里控制固定宽度的不是width而是flex简写和flex-shrink。所以先立一个原则要固定就写flex: 0 0 320px0 是 grow0 是 shrink320px 是基准宽度。要自适应就写flex: 1 1 0grow 为 1 表示吃掉所有剩余空间shrink 为 1 表示空间不够时允许收缩基准宽度是 0 而不是 auto。这两行写对了布局就已经完成一半。2.2 可直接抄的 HTML 与 CSS右侧 320px左侧吃满剩余空间最常见的写法是左侧写在前面、右侧跟在后面HTML 结构如下div classlayout div classmain左侧自适应区域/div aside classside右侧固定区域/aside /div对应的 CSS 是这样的.layout { display: flex; align-items: flex-start; /* 避免两侧被默认拉伸成一样高 */ } .main { flex: 1 1 0; /* 放大、可缩小、基准宽度 0 */ min-width: 0; /* 允许内容收缩到容器宽度以内 */ } .side { flex: 0 0 320px; /* 不放大、不缩小、固定 320px */ background: #f5f5f5; }这里解释一下三处关键参数。.main的flex: 1 1 0是三段式简写第一个 1 是flex-grow表示如果有剩余空间左侧全部吃掉第二个 1 是flex-shrink表示容器不够宽时左侧可以收缩第三个 0 是flex-basis表示在分配空间之前左侧的基准宽度是 0这样剩余空间才能完整分给它。.side的flex: 0 0 320px则相反不参与放大、不参与缩小基准宽度固定在 320px。只要父容器宽度大于 320px右侧就不会变父容器小于 320px 时右侧会溢出这个边界后面单独讲。align-items: flex-start是很多人漏掉的一行。flex 默认align-items: stretch左右两侧会被拉伸到一样高视觉上没错但如果左侧内容特别高、右侧只是个小侧栏侧栏背景会被拉得很长。先写成flex-start让两侧各自按内容高度排列后面需要通高背景时再改回stretch。2.3 参数怎么改固定值、左右互换、间距 gap 的三种调法固定值 320px 不是写死的。右侧宽度想改成 280px 或 360px只需要改.side的flex-basis左侧不需要动因为它本来就是按“剩余空间”分配的。常见做法是把固定宽度提取成一个 CSS 变量方便统一调整:root { --side-width: 320px; } .side { flex: 0 0 var(--side-width); }左右互换有两种改法改 HTML 顺序把aside放到div classmain前面或者不改 HTML给.layout加flex-direction: row-reverse。用row-reverse要注意它同时会反转子项在文档流里的视觉顺序对键盘和读屏软件的顺序也有影响所以我更推荐改 HTML 结构保持视觉顺序和文档顺序一致。间距方面flex 布局优先用gap不要用 margin。.layout上加gap: 16px之后左侧和右侧之间会空出 16px而且 gap 完全不参与 flex 的尺寸计算不会出现“右侧看起来 336px”的错位。如果你在.side上写margin-left: 16px这 16px 会被算进右侧占用的空间里视觉宽度没问题但接下来做响应式或嵌套布局时margin 的叠加很容易让总宽度超过父容器导致换行。3. 用 grid 重写同一种布局两行 CSS 把各列宽度边界写清楚3.1 grid-template-columns: 1fr 320px 与 minmax(0, 1fr) 的区别grid 做这个布局更直白因为它把“哪一列固定、哪一列自适应”直接写在了轨道定义里。给同一个 HTML 换一套 CSS.layout { display: grid; grid-template-columns: 1fr 320px; /* 左列自适应右列固定 320px */ gap: 16px; } .side { background: #f5f5f5; }grid-template-columns里写了几列子项就按顺序放进几列。第一个轨道是1fr表示左侧这一列占 1 份剩余空间第二个轨道是320px表示右侧固定 320px。因为 grid 不会对固定轨道做收缩所以右侧“固定”这个属性天然成立。不过1fr有一个隐蔽的问题它对应的是minmax(auto, 1fr)轨道的最小宽度由内容决定。如果左侧内容里有一张很宽的图片或者一串不换行的英文1fr会被内容撑开导致右侧被推出去或者整个 grid 容器产生横向滚动。解决办法是把自适应列写成minmax(0, 1fr)把最小宽度强制压到 0.layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; }这一个改动看起来不起眼但在真实页面里非常关键。minmax(0, 1fr)的意思是这一列最小 0、最大 1 份剩余空间所有内容溢出都交给 overflow 处理而不是撑破轨道。做数据表格、长 URL、面包屑这类容易超长内容的左侧区域时我会直接默认写minmax(0, 1fr)省得后面再排查。3.2 flex 与 grid 怎么选什么时候值得切到 grid两栏布局用 flex 和 grid 都能做选哪个取决于后续会不会演化。flex 的优势是子项尺寸控制更灵活特别是某个区域内部还想再嵌套一层 flex 时写法更顺手grid 的优势是轨道边界清晰适合“列数固定、尺寸规则明确”的场景。下面这个对照表是我平时做技术选型时会看的对比项flex 方案grid 方案右侧固定写法flex: 0 0 320pxgrid-template-columns: 1fr 320px左侧自适应写法flex: 1 1 0minmax(0, 1fr)间距控制gap: 16pxgap: 16px内容过长时需要min-width: 0需要minmax(0, 1fr)升级到三栏要调整每个子项的 flex 参数加一列轨道即可常见使用场景导航栏、内容区加侧栏整页骨架、仪表盘、多列区块如果页面里只有一处这种两栏结构用 flex 就够了。如果整个页面骨架本来就是多列网格比如左侧导航、中间内容、右侧面板我会直接用 grid因为它可以把三个轨道的宽度放在一行属性里维护而不是分别写在三个 class 里。flex 在“剩余空间分配”上更强grid 在“轨道边界声明”上更强两列布局选谁都行但扩展性上 grid 稍微省心。3.3 窄屏兜底右侧固定宽度在移动端失效时的处理右侧固定 320px 在桌面端没有任何问题但屏幕宽度小于 320px 时右侧会把左侧完全挤没或者撑出横向滚动条。所谓“固定宽度自适应布局”移动端通常会变成“右侧固定、左侧最小宽度保证内容可读”。常规做法是给自适应列加一个最小宽度同时让整体允许横向滚动或者干脆在窄屏把右侧收成小图标。media (max-width: 640px) { .layout { grid-template-columns: 1fr; /* 改成单列右侧顺移到下方 */ } .side { flex: none; /* 如果是 flex 方案这里清掉固定基准 */ } }选择哪种兜底取决于业务。右侧如果是侧边栏菜单移动端一般直接收成抽屉右侧如果是辅助信息栏我会把两栏改成上下排列让主内容先出现。注意单列模式下grid-template-columns: 1fr和minmax(0, 1fr)之间不存在差异但如果你保留了之前的 320px 轨道没删那 320px 在窄屏会继续生效这是最容易漏改的地方。4. 改造 float 与 calc 老代码右侧固定左侧自适应迁移时怎么处理4.1 浮动方案的最小实现float: right 加 margin 占位老项目里常看到的写法是 float 加 margin右侧固定宽度左侧用 margin 腾出空间。这段代码没有任何 flex 和 grid但至今还在很多存量页面里跑着.side { float: right; width: 320px; background: #f5f5f5; } .main { margin-right: 320px; /* 给 float 的右侧让出宽度 */ }原理很简单float: right让右侧脱离普通文档流向左上移动直到碰到容器右边缘左侧的.main还在普通流里通过margin-right: 320px把宽度让出来视觉上就形成了“右侧固定、左侧自适应”。注意这里左侧没有写宽度块级元素默认宽度是 auto会自动填满父容器减去 margin所以“自适应”是天然成立的。坑在于 float 元素不参与父容器高度计算。如果.layout里只有这两个子元素父容器高度会塌陷为 0背景色、边框、后续兄弟元素的位置都会错乱。所以浮动方案不能单独用必须搭配清除浮动。另外.side的width: 320px和.main的margin-right: 320px是两个独立的值右侧宽度改了左侧 margin 必须同步改否则要么重叠要么留白过大。这也是我建议新代码别用 float 做这种布局的原因之一宽度状态需要手动保持一致。4.2 清除浮动 css 的两种写法与 calc() 的适用边界清除浮动是浮动方案的标配。常见的做法是给父容器加伪元素.layout::after { content: ; display: block; clear: both; }这段代码的作用是在.layout的最后生成一个空块级元素clear: both让它必须排到所有浮动元素下方从而把父容器的高度撑起来。另一种写法是给.layout直接加overflow: hidden或overflow: auto让父容器形成 BFC也能把浮动元素的高度计算进去。两者我都用过伪元素方式更干净不会因为内容溢出触发滚动条overflow: hidden写起来省事但左侧内容超出容器时会被裁掉或者出现滚动条排查时很容易误判。还有一类老代码会配合calc()比如.main { float: left; width: calc(100% - 320px); }calc(100% - 320px)的意思是宽度等于父容器内容盒宽度减去 320px。它跟margin-right: 320px的效果接近但适用边界更严格。100%是相对父容器的 content 宽度也就是不包含父容器 padding如果.layout有padding: 20px左边这个 100% 会先按去掉 padding 后的宽度算再减 320px配合右侧 float 时很容易出现总和超过 100% 导致换行。另一个边界是运算符号两边必须留空格calc(100% -320px)是无效写法浏览器会直接忽略这整条声明。所以在老代码里看到 calc 布局失效先检查括号里的空格和父容器 padding。4.3 从老方案迁移到 flex 时最容易漏掉的三个样式把 float 方案改成 flex 方案不只是把float删掉这么简单。我做过几次这种迁移最常漏掉的是下面三样。第一残留的clear和 float。.side的float: right删掉之后如果.layout上还有::after的clear: both不影响 flex可以顺势删掉但如果页面里其他兄弟元素还依赖这个清除浮动删了可能引起别处错位。迁移前先查整个.layout相关的 float 和 clear 有没有被别的地方引用。第二margin 和 gap 的重复。老代码里.main通常有margin-right: 320px改成 flex 之后如果又在.layout上加了gap: 16px那左侧实际上会让出 320 16px右侧间隙明显偏大。改法是把margin-right删掉间距只由 gap 控制。第三宽度写死。老代码里的.main经常有width: 70%或者width: calc(100% - 320px)迁移到 flex 后这些显式宽度会和flex: 1 1 0打架。flex 子项一旦设置了flex-grow显式width会作为flex-basis的参考但行为很难预期。最干净的方式是迁移时把左侧的width全部删掉只保留flex: 1 1 0和min-width: 0。5. CSS 右侧固定、左侧自适应的常见问题排查5 个高频坑5.1 坑一左侧内容被压扁而不是自适应现象左侧区域文字挤在一起或者图片被压得变了形右侧看似固定但整体很难看。原因flex 方案里左侧子项本身有默认的flex-shrink: 1当内容宽度大于剩余空间时左侧会被压缩到比内容更窄而不是让内容溢出。解决给左侧设置flex: 1 1 0只解决分配空间还要加上min-width: 0解除默认的最小内容宽度限制如果左侧里面还要保留长文本省略则需要在文本元素上补overflow: hidden; text-overflow: ellipsis; white-space: nowrap;。.main { flex: 1 1 0; min-width: 0; } .main p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }5.2 坑二右侧宽度写了 100%整行换行现象右侧明明想固定 320px结果跑到第二行去了或者右侧把左侧整个挤没。原因右侧元素用了width: 100%或者 flex 简写写成了flex: 1 0 320px导致它在空间分配时参与了放大占满整行。解决右侧固定必须写flex: 0 0 320px三个参数缺一不可如果你习惯用width: 320px那必须同时写flex-shrink: 0两行一起控制才稳。5.3 坑三省略号不出现因为 min-width: 0 没有设现象左侧内容超长右侧被挤到看不见或者横向滚动条出现但左侧文字怎么都不出省略号。原因flex 子项的默认min-width: auto会强制子项不小于内容宽度文本不换行时子项会被撑到超长text-overflow: ellipsis根本没有触发条件。解决逐层检查从.layout到.main再到文本元素每一层都要允许收缩核心是.main加min-width: 0文本元素加overflow: hidden。.main { min-width: 0; } .main .text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }5.4 坑四间距写在 margin 而不是 gap宽度对不上现象页面看着没毛病但把右侧固定值从 320px 改成 300px 时总宽度对不上或者浏览器缩放到某个宽度时突然换行。原因间距用了 margin且 margin 和 flex/grid 的gap叠加了。gap不影响子项尺寸计算margin 会额外占用主轴空间两套间距混用时总宽度会比预期多。解决统一间距方案要么全部用 gap要么全部用 margin不要混用。5.5 坑五父容器宽度未知时左右两侧没对齐现象右侧固定宽度正确但整体布局没有占满屏幕右侧没有顶到最右边或者左右两侧底部不对齐。原因父容器.layout本身没有宽度或者它的宽度由内容撑开flex 容器退化成了“内容宽度”剩余空间计算就失去了基准。解决给.layout设置width: 100%或者确保它的父级有明确宽度如果两侧高度需要一致把align-items: flex-start改回stretch或者给两侧都补一个等高的内部背景。.layout { display: flex; width: 100%; min-width: 0; /* 避免在嵌套 flex 里被父级压缩 */ align-items: stretch; }6. 验证与进阶从两栏布局到三栏布局的一个可靠抓手6.1 用 devtools 验证自适应是否成立写完布局先别急着提交打开浏览器开发者工具把视图切到 responsive 模式然后从宽到窄拖拽窗口。三个检查点右侧固定列是否始终等于目标宽度左侧是否随之收缩而不是出现横向滚动条缩到移动端宽度时是否触发了兜底断点。如果想快速确认有没有横向溢出可以在 console 里执行一行代码document.documentElement.scrollWidth document.documentElement.clientWidth返回 true 就说明有元素超出视口结合 devtools 的覆盖层找到是哪个子项九成问题都出在min-width: 0或minmax(0, 1fr)没有写。6.2 三栏布局示例左右固定中间自适应两栏布局再往前走一步就是“左右固定、中间自适应”这时候 grid 的优势更明显。改动只需要在轨道定义里加一列.layout-3 { display: grid; grid-template-columns: 220px minmax(0, 1fr) 320px; gap: 16px; width: 100%; } .layout-3 .left { grid-column: 1; } .layout-3 .center { grid-column: 2; } .layout-3 .right { grid-column: 3; }HTML 里三个子元素按顺序排列grid 会自动放进三个轨道。中间列写minmax(0, 1fr)左右两列写固定值整个布局的宽度边界一眼就能看全不需要像 flex 那样同时考虑三个子项的 grow、shrink、basis。6.3 我自己做这类布局的习惯这个布局我写过很多遍翻车最多的一次是忘了给父容器加display: flex结果右侧直接掉到第二行排查了半小时才发现是上一版调试时把类名写错了。后来我养成了一个固定顺序先写右侧固定值再写左侧自适应最后打开 devtools 拖一次窗口宽度确认没有横向滚动条再收工。遇到老页面就用第 4 章的方式先梳清 float 和 margin再决定要不要迁移。希望帮到你。本文还有配套的精品资源点击获取