简介CSS两栏布局是前端开发中非常经典的一类需求这份PDF文档完整讲解了“右侧固定宽度、左侧宽度自适应”的实现思路内容面向前端初学者、网页重构人员及希望巩固经典布局原理的开发者。文档结合博客园默认主题等真实场景系统讲解浮动配合margin、绝对定位等多种实现方法并分析各方案在HTML结构顺序、后续元素定位上的限制与取舍包体为1个PDF文件压缩包大小约129KB内容精炼便于本地查阅与临摹练习。已有1527人学习下载。读者从中可以学到如何处理定宽侧边栏与自适应内容区的并列关系如何应对sidebar在content之前或之后的HTML结构差异理解绝对定位对文档流的脱离影响与清除浮动的必要操作从而避免侧边栏错位、内容遮挡等实际开发中的常见问题这些经典思路也为后续掌握Flexbox、Grid等现代布局方案打下了坚实基础。1. 先搞清楚这个布局到底在解决什么问题网页布局里最典型的“右侧固定宽度、左侧宽度自适应”几乎每个后台管理系统都在用侧边栏固定 300px右侧内容区随窗口变大变小博客文章的目录栏固定正文区域自适应电商详情页的购买信息栏固定左边图片和描述撑满剩余空间。看似简单但真做起来一个 1920 宽的页面拖到 1024左侧内容被挤成一条细线或者右侧明明写了 width:300px 却被长英文单词顶到 500px 宽这类问题在 css 布局里反复出现。这个标题要讲的就是用 CSS 实现右侧固定宽度、左侧宽度自适应时哪种方案最稳、关键参数怎么设、有哪些边界值会让你翻车。适合刚学完 CSS 选择器、准备自己拼页面的新手也适合写过很多管理后台但总被布局坑绊一下的全栈工程师。2. 四种主流实现方案选型对比与原理拆解2.1 浮动布局经典方案但清浮动是绕不开的坎浮动是 CSS 2.1 时代做两栏布局最常用的“老把式”。做法是让右侧盒子float: right并且给它一个固定宽度左侧的盒子不浮动只留一个margin-right把右侧占掉的空间让出来。核心原理是浮动元素脱离了普通文档流后续内容会向左上角顶所以必须用 margin 或 padding 给左侧“腾位子”。.container { /* 这里暂时不留 overflow等下用 clearfix */ } .right { float: right; width: 300px; background: #f5f5f5; } .left { margin-right: 320px; /* 300 20 间距 */ background: #fff; }这段代码在视觉上能做出来但有一个典型副作用父容器.container的高度不会包含浮动的右侧盒子。如果父容器本身没有设置高度背景色会消失后面的兄弟元素会紧贴左侧盒子底部把布局挤乱。解决方式有两种我一般会先给父容器加overflow: hidden触发 BFC或者用经典 clearfix.container { overflow: hidden; /* 触发 BFC父容器包住浮动元素 */ }.container::after { content: ; display: table; clear: both; }浮动方案的优势是兼容性极好哪怕 IE8 都能跑缺点是每次都必须记得清浮动一旦忘了布局塌陷得毫无预兆。而且右侧盒子浮动后如果左侧内容更长右侧底部会空出一截视觉上像两块内容高度不对齐。浮动其实并不是“自适应”最优雅的工具但作为兜底方案尤其是遇到老项目你还是得会。2.2 flex 布局一行代码解决但 flex-shrink 默认值会咬人现代 CSS 布局里我最常用的方案是 flex。它的原理比浮动简单得多把父容器设为display: flex子项变成一条主轴上的伸缩盒子。右侧盒子通过flex: 0 0 300px表示“不放大、不缩小、基准宽度 300px”左侧盒子通过flex: 1表示“吃掉所有剩余空间”。这样右侧固定左侧自适应。.container { display: flex; } .left { flex: 1; min-width: 0; /* 允许左侧内容区收缩后面会细讲 */ background: #ffffff; } .right { flex: 0 0 300px; background: #f0f0f0; }flex 方案最诱人的地方是代码量少、不用清浮动、高度默认是拉伸对齐的。但很多新手的第一个坑就是flex: 1和flex: 0 0 300px的写法。flex: 1是flex: 1 1 0%的缩写意思是允许放大也允许缩小。当窗口宽度很窄时左右两侧都会参与收缩右侧的“固定宽度”并不固定。必须把右侧写成flex-shrink: 0也就是flex: 0 0 300px它才不会被压缩。这个细节就是 flex 布局里最容易翻车的点我会在下一章专门展开。2.3 绝对定位方案右侧固定高度场景下的特殊解法绝对定位的思路是让右侧盒子脱离文档流钉在父容器的右上角左侧盒子通过margin-right让出右侧空间。这种方案适合右侧是一个悬浮面板、左侧是主要内容区并且右侧高度独立于左侧的场景。.container { position: relative; } .right { position: absolute; top: 0; right: 0; width: 300px; background: #f0f0f0; } .left { margin-right: 300px; background: #ffffff; }这里有一个容易被忽略的边界左侧的margin-right只能空出宽度不能把左侧的高度和右侧对齐。如果右侧比左侧高右侧会溢出父容器底部如果左侧比右侧高右侧底部会留白。你需要额外给右侧加height: 100%或者让父容器设置一个固定高度。绝对定位方案更常用于右侧是“悬浮工具条”的场景比如视频播放页右侧的互动面板因为它天然不占文档流不会把左侧内容挤走。若左右两栏都要撑满容器高度这种方案就不够结实还是 flex 更省心。2.4 Grid 与 calc()现代浏览器里的两种现代解法CSS Grid 可以看作 flex 的“二维版本”只做单行两列布局时它的写法甚至比 flex 更直观。核心思路是给父容器定义两列轨道宽度第一列1fr自适应第二列300px固定fr单位会把剩余空间按比例分配。.container { display: grid; grid-template-columns: 1fr 300px; }这里1fr与300px之间不用写 margin间距可以用gap: 20px单独控制。Grid 方案对右侧固定、左侧自适应的需求几乎零学习成本但要注意1fr和min-width: auto的默认行为当左侧内容是不可压缩的表格或长 URL 时1fr可能被内容撑爆导致右侧轨道被推出容器。所以 Grid 方案里同样需要给左侧设置min-width: 0。calc() 则是另一种思路先把自适应那侧的宽度直接算出来。假设容器宽度是 100%右侧固定 300px间距 20px左侧宽度就是calc(100% - 320px)。这个函数需要配合浮动或 inline-block 一起用比如左侧float: left; width: calc(100% - 320px)。calc() 的问题在于对空格要求极严格减号两侧必须有空格否则整条属性无效。它更像一个“手动计算”的工具适合右侧宽度会变化的动态场景但写着写着就容易踩语法坑所以我通常只在需要精确计算时才用它日常布局首选 flex 或 Grid。方案优点缺点适用场景float兼容老浏览器思路直接需要清浮动高度难对齐老旧项目、无 flex 支持的兜底flex代码少伸缩行为可控默认 shrink 会压缩固定侧现代浏览器下的首选绝对定位不干扰文档流高度不齐需要额外处理右侧悬浮面板Grid轨道概念清晰间距控制方便1fr也会被内容撑破两列整体布局推荐备用calc()宽度可精确计算语法空格坑多依赖其他布局动态宽度计算的组合方案3. 用 flex 跑通最小实现从 HTML 到关键 CSS 参数3.1 最小 HTML 结构与 flex 核心代码选 flex 作为落地方案是有代价的你必须理解每个参数为什么这样写而不是背代码。先搭一个最标准的 HTML 骨架div classlayout div classlayout-left 这里是自适应区域宽度会随父容器变化。 /div div classlayout-right 这里是固定区域宽度始终为 300px。 /div /div对应 CSS 如下.layout { display: flex; width: 100%; min-height: 100vh; } .layout-left { flex: 1 1 0%; min-width: 0; background: #fafafa; } .layout-right { flex: 0 0 300px; background: #e8e8e8; }这段代码里有三个点需要解释。第一display: flex让.layout变成弹性容器子项默认沿主轴从左到右排列主轴方向不需要改。第二左侧的flex: 1 1 0%表示放大比例 1、缩小比例 1、基准宽度 0%意思是不管容器多宽左侧都会瓜分掉剩余空间如果改成flex: 1 0 auto那么左侧会先按内容宽度挤出初始宽度再把剩余空间吃掉两种写法效果不同。第三右侧的flex: 0 0 300px表示放大比例 0、缩小比例 0、基准宽度 300px即这个元素既不会变大也不会变小始终 300px。3.2 三个必调参数flex-shrink、flex-basis、min-widthflex 布局的参数里最影响这个题目的是flex-shrink、flex-basis和min-width。flex-shrink的默认值是 1代表空间不足时允许缩小。右侧盒子如果不关掉收缩那么当父容器宽度小于左侧内容最小宽度加右侧 300px 时右侧就会变窄所谓“固定宽度”就成了空话。解决方法是给右侧设置flex-shrink: 0或者直接写成flex: 0 0 300px。左侧则相反最好保留flex-shrink: 1让它在窄屏时先收缩自己。flex-basis是子项在主轴上的初始尺寸优先级高于width。当flex-basis: 0%时元素的宽度完全由放大比例和剩余空间决定这正好适合左侧自适应区域。右侧用flex-basis: 300px时即使不写width右侧也是 300px。但很多人习惯写width如果你同时写了flex-basis: 300px和width: 300pxflex-basis 会赢这个行为比较反直觉。min-width是第三个隐藏杀器。flex 子项的默认min-width: auto意味着元素不能小于它的内容最小宽度。左侧自适应区域如果有一个很长的英文地址或者一张表格整个 flex 布局会被撑破右侧被推出屏幕。设置min-width: 0后左侧才允许被压缩到比内容更窄再配合overflow: hidden让超出的内容滚动或裁切布局才真正“自适应”。3.3 右侧固定宽度到底用 width 还是 flex-basis经常有人问我右侧既然要固定宽度到底写width: 300px还是flex-basis: 300px我的结论是在 flex 容器里推荐用flex-basis或者用width同时强制写flex-shrink: 0。原因是 flex 布局的尺寸算法里flex-basis的优先级高于width如果只写width: 300px且不设置flex-shrink空间不足时右侧会自动收缩固定宽度失效。如果一定要用width必须这样写.layout-right { flex-shrink: 0; width: 300px; }从可读性上看flex: 0 0 300px一行就把三个属性都表达了更不容易漏。它还暗示了这个元素的行为是“不伸缩、基准 300px”团队其他人一看就懂。另外要注意flex-basis默认值是auto它的意思是“以子项自身的 width 或内容宽度为基准”所以当你不写flex-basis而只写flex-shrink: 0时右侧的宽度还是会取width两者不冲突但容易混乱。我的习惯是统一用flex: 0 0 宽度固定右侧用flex: 1 1 0%加min-width: 0处理左侧这样规则简单踩坑少。3.4 给左侧加溢出滚动、给右侧加内容卡片验证布局是否真的自适应光有左右两栏还不行真实页面里左侧通常是一个内容滚动区右侧是固定操作面板。把左侧设成独立滚动区能验证min-width和 flex 配合是否正常.layout { display: flex; height: 100vh; /* 整屏高度 */ } .layout-left { flex: 1 1 0%; min-width: 0; overflow-y: auto; /* 左侧内容超高时滚动 */ padding: 24px; box-sizing: border-box; } .layout-right { flex: 0 0 320px; padding: 20px; background: #f7f7f7; border-left: 1px solid #ddd; box-sizing: border-box; }这个例子里右侧固定 320px 并带左边框左侧用overflow-y: auto处理长内容。验证方法很简单打开浏览器 DevTools把布局容器选出来然后在 Elements 面板里修改.layout的宽度从 1440 改成 800观察右侧是否还是 320px、左侧是否在自动缩小再把左侧塞入一段不换行的长文本观察是否出现横向滚动条。如果右侧被顶宽说明左侧min-width: 0没生效如果右侧宽度变了说明flex-shrink: 0没写上。这两个就是判断布局是否合格的核心指标。4. 浮动与绝对定位方案的完整替代什么时候我不用 flex4.1 浮动方案完整代码与 BFC 触发方式虽然 flex 是现代主流但有时项目需要兼容老浏览器或者改造成本过高我不得不用浮动方案。完整的浮动两栏布局至少要包含三部分右侧浮动、左侧留白、父容器清浮动。下面这段是可直接运行的模板.layout { overflow: hidden; /* 触发 BFC父容器包含浮动子项 */ } .layout-right { float: right; width: 300px; } .layout-left { margin-right: 320px; /* 300px 右侧宽度 20px 间距 */ }注意这里没有给.layout设置宽度它的宽度默认等于父元素宽度右侧浮在右边左侧通过margin-right让出位置。如果不用overflow: hidden请用 clearfix 伪元素.layout::after { content: ; display: table; clear: both; }两种清浮动方式效果略有区别overflow: hidden会裁切溢出父容器的内容如果左侧或右侧有下拉菜单或气泡弹层会被裁掉clearfix 伪元素则不会。所以我更推荐 clearfix除非你知道父容器内不会有超出边界的元素。浮动方案的另一个坑是左侧的margin-right数值必须包含右侧固定宽度和间距如果右侧宽 300px、间距 20px左侧就要留 320px这个数字没法像 flex 那样自动计算改右侧宽度时很容易漏改左侧。4.2 绝对定位方案的 left right 同时给定注意宽度冲突绝对定位方案里有一个容易上手但极易写错的变体左右两侧都绝对定位左侧同时设置left: 0和right: 300px右侧设置right: 0和固定宽度。这样左侧的宽度由left和right共同决定也能实现“右侧固定、左侧自适应”.layout { position: relative; height: 500px; } .layout-left { position: absolute; left: 0; right: 320px; /* 让出右侧 300px 间距 20px */ top: 0; bottom: 0; } .layout-right { position: absolute; right: 0; top: 0; bottom: 0; width: 300px; }这种写法的问题在于如果左侧同时设置了left、right和width那么width会优先左侧自适应效果失效。开发者经常在左侧为了内容排版顺手加一个width结果布局瞬间变成左侧固定宽度、右侧固定宽度中间溢出。而且绝对定位会让子项脱离文档流父容器高度必须手动设定不然整个布局塌成 0 高度。这种方案只适合你知道容器高度定值、且可以用 JavaScript 动态调整的场景比如做拖拽分栏时用 left/right 像素值计算位置反而更直观。4.3 老浏览器兜底table-cell 与 inline-block 方案如果项目要兼容 IE8float 之外还可以用 table 布局。把父容器设为display: table左右两栏设为display: table-cell单元格会自动均分宽度右侧固定宽度后剩余空间会自动归左侧。这个方案不用清浮动高度也能对齐是很多老后台的压箱底方案.layout { display: table; width: 100%; } .layout-left { display: table-cell; background: #fff; } .layout-right { display: table-cell; width: 300px; background: #f0f0f0; }table-cell 方案有个天然问题单元格之间没有间隙如果需要间距只能给单元格加padding或border-spacing而 border-spacing 需要父容器设置border-collapse: separate麻烦且脏。inline-block 则是把两栏都设为display: inline-block; vertical-align: top左侧宽度用calc(100% - 300px)精确计算右侧宽度 300px。这个方案的难点是 inline-block 元素之间会有一个约 4px 的空白间隙父容器需要设置font-size: 0来消除左侧和右侧里再单独恢复字体大小。这两个方案我一般不主动用但碰到老代码时会识别出来不会一看到 float 就全部推翻重写。4.4 如何验证右侧确实是固定宽度border-box 的影响不管用哪种方案验证“右侧是否真的固定”都要看 DevTools 里的 Computed 样式而不是只看 CSS 里的 width 值。默认盒模型是content-boxwidth: 300px只表示内容宽度右栏如果加了padding: 20px和border: 1px solid #ddd它的实际占据宽度就是 300 40 2 342px。在 flex 容器里这会直接影响左侧自适应区域的计算导致左侧实际宽度比预期少 42px。最省心的做法是给全站设置统一盒模型*, *::before, *::after { box-sizing: border-box; }设置后width: 300px就代表元素总宽度包含 padding 和 border。这也是我在搭建任何布局前会先做的第一件事。验证时在 DevTools 里选中右侧元素看 Computed 面板的 width 是否等于 300px同时看父容器右侧边缘是否正好贴合视口边界。如果右侧宽度不等于 300px优先检查有没有全局的box-sizing影响、有没有其他样式覆盖了width、有没有 flex 收缩没有关掉。这三个原因占了右侧宽度异常的九成。5. 常见问题与避坑右侧固定宽度左侧自适应的 5 个翻车现场5.1 左侧被挤成一条窄线现象窗口拉宽后左侧区域仍然只有一条窄线右侧占掉了大片空间看着就像左右顺序反了。原因左侧flex: 1虽然想占据剩余空间但右侧设置了flex: 0 0 300px后左侧的计算基准是0%理论上应该吃掉所有剩余宽度。可如果容器还有第三个元素或者左侧内容里有一个不可压缩的子元素比如带white-space: nowrap的文本、表格左栏的min-width: auto会被内容顶住无法继续收缩最终表现为左侧很窄、右侧很宽甚至出现横向滚动条。解决给左侧加min-width: 0让它允许被压缩到比内容更窄如果左侧内部确实有长文本再加overflow-wrap: break-word或word-break: break-all。代码里必须确保左侧是flex: 1 1 0%右侧是flex: 0 0 300px不要漏掉任何一个数字。5.2 右侧宽度被内容撑破现象右侧明明设置了width: 300px或flex-basis: 300px实际渲染出来却是 340px甚至更宽。原因flex 子项默认min-width: auto如果右侧内容里有一段不换行的长字符串、一张宽图或者一个自带默认最小尺寸的 input 输入框它的最小内容宽度就会超过 300px把右侧撑破。这不是 width 没生效而是 min-width 默认值在作怪。解决给右侧设置min-width: 0配合overflow: hidden图片要设max-width: 100%input 要设width: 100%或合适的固定宽度。另外保证右侧的flex-shrink: 0否则容器空间紧张时右侧会优先被压缩长内容又把它顶回去形成抖动效果。检查时用 DevTools 看右侧元素的计算宽度如果大于设定值就在该元素的 Computed 面板里查 min-width 和内容宽度。5.3 浮动布局后父容器高度塌陷现象用 float 做完右侧固定、左侧自适应后父容器的背景色消失了下面的内容直接顶到布局内部整个页面像叠在了一起。原因浮动元素脱离了文档流父容器不会自动计算它的高度。左侧如果不浮动父容器高度只由左侧内容决定如果左侧内容比右侧短父容器高度就比右侧矮背景和边框只覆盖到左侧那部分。解决给父容器补 clearfix 或触发 BFC。clearfix 的标准写法如下.layout::after { content: ; display: table; clear: both; }如果不想写伪元素也可以给父容器overflow: hidden或float: left但后者会让父容器自己也脱离文档流影响兄弟元素。我的建议是永远保留 clearfix 工具类遇到浮动布局直接加省得每次排查高度问题浪费几小时。5.4 calc(100% - 300px) 莫名失效现象写了width: calc(100% - 300px)浏览器 DevTools 里这一条样式是删除线状态左侧宽度直接变成 100%右侧被挤到下一行。原因CSS calc 里加号和减号运算符两侧必须有空白字符否则浏览器会把整个表达式当成非法值并丢弃。常见写法calc(100%-300px)没有空格或者calc(100% -300px)只加了减号后面没有前面都会让属性失效。解决写成calc(100% - 300px)减号前后各留一个空格。乘除运算符没有这个强制要求但为了让代码风格统一我一般也都加空格。另外calc表达式中如果包含 CSS 变量比如calc(100% - var(--right-width))变量里也要保证宽度值后面能正常计算。这个坑特别隐蔽因为它不会报错只是静默失效检查时要重点看 Styles 面板里属性有没有被删除。5.5 盒模型导致整体宽度超过视口现象右侧 300px左侧flex: 1视觉上左右两部分加起来却超出了容器宽度页面出现横向滚动条右侧甚至被挤到屏幕外。原因默认box-sizing: content-box下width只代表内容区宽度不包含padding和border。左侧自适应区域如果加了padding: 20px它在没有任何外包约束时会把自己的实际宽度变成“可用宽度 40px”导致总和超过父容器。解决全站设置box-sizing: border-box让所有元素的 width 都包含 padding 和 border。具体做法是在样式表最前面放通配符选择器代码。这样左侧flex: 1计算出的宽度就已经含 padding右侧 300px 也含 padding不会再溢出去。设置后如果还有横向滚动条再检查有没有元素设置了固定的 min-width或者某个子元素使用了现对单位100vw这两种情况都会绕过盒模型约束直接撑破视口。6. 进阶把右侧固定宽度抽成 CSS 变量配合媒体查询自动切换当右侧固定宽度不再是一个写死的 300px而是全局可配置的约束时布局的可维护性会上一个台阶。我会把右侧宽度定义在根选择器上其他组件都引用这个变量:root { --right-width: 300px; } .layout { display: flex; } .layout-left { flex: 1 1 0%; min-width: 0; } .layout-right { flex: 0 0 var(--right-width); }这样整个项目里所有引用右侧固定宽度的模块都会跟随--right-width变化。比如左侧的margin-right不再写死 300px而是margin-right: calc(var(--right-width) 20px)换宽度时只需改一处。更进一步在窄屏断点可以直接覆盖变量让右侧变窄但布局结构完全不变media (max-width: 768px) { :root { --right-width: 240px; } }这段代码配合 flex 布局窗口小于 768px 时右侧自动变为 240px左侧继续吃掉剩余空间。相比接 JavaScript 计算宽度这个方案零脚本、零重排而且 CSS 变量的值可以在浏览器 DevTools 里实时修改调试体验非常顺。我自己的习惯还有一条把左右两栏的间距也抽成变量比如--layout-gap: 20px需要调整时两个变量一起改。这套思路同样可以用 Grid 实现grid-template-columns: 1fr var(--right-width)效果等同。但保留 flex 写法是因为它更容易配合后续的拖拽改变宽度。真做到那一步时只需要在 JavaScript 里修改--right-width的值比如container.style.setProperty(--right-width, 280px)浏览器就会自动重排不触碰 flex 布局的其他参数。这种方法比直接改style.width更干净因为所有引用该变量的地方都会同步更新。如果你在项目里遇到左侧内容需要一条滚动目录、右侧是固定操作面板我建议不要一上来就写两套布局。先定好--right-width再决定用 flex 还是 Grid。我早年做后台模板时图省事把右侧宽度写死了 300px后来产品要求改成 260px全局搜出十几个硬编码宽度改到深夜才清完。从那以后我再也不在布局里写裸的宽度数字宁可多抽出两个变量也不想再吃一次布局返工的亏。希望这些踩坑记录能帮你把右侧固定、左侧自适应的布局一次做对希望帮到你。本文还有配套的精品资源点击获取