前端css实现左边div固定宽度100px，右边div自适应布局

html结构：

<div id="container">
    <div id="left"></div>
    <div id="right"></div>
</div>

方法一：flex 布局

#container{
    width:100%;
    height:500px;
    display: flex
}
#left{
    width:100px;
    height:100%;
    background: yellow;
}
#right{
    height:100%;
    background: pink;
    flex: 1
}

方法二：浮动

#container{
    width:100%;
    height:500px;
}
#left{
    width:100px;
    height:100%;
    background: yellow;
    float: left;
}
#right{
    height:100%;
    background: pink;
    padding-left:100px;
}

方法三：BFC(块级格式化上下文)

#container{
    width:100%;
    height:500px;
}
#left{
    width:100px;
    height:100%;
    background: yellow;
    float: left;
}
#right{
    height:100%;
    background: pink;
    overflow:hidden;
}

方法四：calc

#container{
    width:100%;
    height:500px;
}
#left{
    width:100px;
    height:100%;
    float: left;
    background: yellow;
}
#right{
    width: calc(100% - 100px);
    height:100%;
    float: right;
    background: pink;
    overflow:hidden;
}

 

来源：CSDN

作者：桃子Jerry

链接：https://blog.csdn.net/jerryJJYY/article/details/103454490