7种方法实现CSS左侧固定,右侧自适应布局
左侧内容固定,右侧自动占满屏幕布局是开发中常见的布局,通常可见于一些管理后台:左侧展示菜单栏,右侧展示管理内容。
今天整理了7种实现这种布局的方法:
一:float+bfc ,左侧宽度不需要固定,但父级容器宽度需大于左侧宽度,否则右侧被挤压无法展示
/*左浮动固定宽度,右边盒子overflow:hidden触发bfc,使其不与浮动盒子区域重叠,因此会重新计算宽度。*/
.container1 .left{
float: left;
width: 100px;
}
.container1 .right {
overflow: hidden