[html] 7种方法实现CSS左侧固定，右侧自适应布局

彩蛋：后台管理系统一站式平台模板

vue-next-admin，这是基于 vue3.x + CompositionAPI + typescript + vite + element plus + vue-router-next + next.vuex，适配手机、平板、pc 的后台开源免费模板库

左侧内容固定，右侧自动占满屏幕布局是开发中常见的布局，通常可见于一些管理后台：左侧展示菜单栏，右侧展示管理内容。
今天整理了7种实现这种布局的方法：

一：float+bfc ，左侧宽度不需要固定，但父级容器宽度需大于左侧宽度，否则右侧被挤压无法展示
/左浮动固定宽度，右边盒子overflow:hidden触发bfc，使其不与浮动盒子区域重叠，因此会重新计算宽度。/
.container1 .left{
float: left;
width: 100px;
}
.container1 .right {
overflow: hidden;
}
/清除浮动/
.container1:after{
content: “”;
height: 0;
line-height: 0;
display: block;
visibility: hidden;
clear: both;
}
二：float+margin-left，左侧宽度需固定
/左浮动固定宽度,右边margin-left/
.container2 .left{
float: left;
width: 100px;
}
.container2 .right{
margin-left: 100px;
}
/清除浮动/
.container2:after{
content: “”;
height: 0;
line-height: 0;
display: block;
visibility: hidden;
clear: both;
}
三：absolute+margin-left，左侧宽度需固定并且绝对定位，缺点：当左侧高于右侧时，左侧会超出父元素，需要使用js补救
.container3 {
position: relative;
}
.container3 .left{
position: absolute;
left: 10px;
top: 10px;
width: 100px;
}
.container3 .right{
margin-left: 100px;
}
四：子元素inline-block + calc动态计算宽度，左侧宽度需固定，父元素需要设置font-size:0清除默认间距，子元素设置vertical-align：top使其顶部对齐，右侧设置 width: calc(100% - 140px);达到自适应
/双display:inline-block/
.container4{
font-size: 0;
}
.container4 .left{
width: 100px;
}
.container4 .left,.container4 .right{
display: inline-block;
font-size: 16px;
vertical-align: top;
}
.container4 .right{
width: calc(100% - 100px);
}
五：table-cell，表格布局
.container5{
display: table;
}
.container5 .left,.container5 .right{
display: table-cell;
}
六：：flex，最便捷的方法，flex-grow可自由伸张，缺点：低版本IE不支持
.container6{
display: flex;
}
.container6 .right{
flex-grow: 1;
}
七：grid，网格布局
.container7{
display: grid;
}
.container7 .left{
grid-column:1;
}
.container7 .right{
grid-column:2;
}
效果如下：

13079544-56539cb668b3fc8c.gif

示例完整代码：

左边左边左边左边左边左边左边左边左边左边

右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边

左边左边左边左边左边左边左边左边左边左边

右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边

左边左边左边左边左边左边左边左边左边左边

右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边

左边左边左边左边左边左边左边左边左边左边

右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边

左边左边左边左边左边左边左边左边左边左边

右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边

左边左边左边左边左边左边左边左边左边左边

右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边

左边左边左边左边左边左边左边左边左边左边

右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边右边

原文作者技术博客：https://www.jianshu.com/u/ac4daaeecdfe 95后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。 欢迎留言交流。