常用pc端实现左边100px固定，右边自适应

前端小99

已于 2022-07-21 10:58:29 修改

阅读量500

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： html javascript 前端

于 2022-07-21 10:56:12 首次发布

本文链接：https://blog.csdn.net/qq_41328247/article/details/125907799

css 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了如何使用flex布局实现自适应宽度分配，并通过创建BFC实例，演示了如何浮动元素配合overflow属性创建左右布局。重点讲解了flex属性如flex-basis, flex-shrink和flex-grow的运用，以及如何设置BFC来隔离元素影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1：可以用flex布局实现这个效果，用到的flex方法有flex-basis，flex-shrink，flex-grow。

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

来，直接实现一下：

<div class="box">
<div class="one"> 111</div>
<div class="two">222</div>
</div>
.box{
width: 100%;
height: 100%;
display: flex;
}
.one{
flex-basis: 100px;
flex-shrink: 0;
background-color: aqua;
}
.two{
flex-grow: 1;
background-color: blue;
}

2：创建BFC—给左边元素设置BFC，float:left,width:100px，右边div设置overflow:auto/hidden1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .one {
                float: left;
                height: 100px;
                width: 300px;
                background-color: blue;
            }
            .two {
                overflow: auto;  /*overfloe:hidden*/
                height: 200px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div class="one"></div>
        <div class="two">第二种方法</div>
    </body>