<div class="content">
<div class="left">固定宽度区</div>
<div class="right">自适应区</div>
</div>
方法1：将左侧div浮动，右侧div设置margin-left
.content{
background:pink;
overflow: hidden;
}
.left{
background: #BCE8F1;
float: left;
width:200px;
}
.right{
background: #F0AD4E;
margin-left:200px;
}
image.png
方法2：固定区采用绝对定位，自适应区设置margin
.content{
background:pink;
position: relative;
height:150px;
}
.left{
background: #BCE8F1;
position: absolute;
left: 0;
top: 0;
width:200px;
height:100%;
}
.right{
background: #F0AD4E;
margin-left: 200px;
height:100px;
}
缺点:
1、使用了绝对定位，若是用在某个div中，需要更改父容器的position。
2、没有清除浮动的方法，若左侧盒子高于右侧盒子，就会超出父容器的高度。因此只能通过设置父容器的min-height来放置这种情况。
image.png
方法3：使用display: table;
.content{
background:pink;
display: table;
width:100%;
}
.left{
background: #BCE8F1;
display:table-cell;
width:200px;
height:150px;
}
.right{
background: #F0AD4E;
display:table-cell;
height:100px;
}
优点，高度不受限制，随内容多少变化，设定的高度会作为最小高度；内容增多，高度随之增高。
image.png
方法4：双float + calc()计算属性（CSS3）
.content{
background:pink;
overflow: hidden;
}
.left{
background: #BCE8F1;
float:left;
width:200px;
height:150px;
}
.right{
background: #F0AD4E;
float:left;
width:calc(100% - 200px);
height:100px;
}
image.png
方法5：双inline-block + calc()计算属性
.content{
background:pink;
box-sizing: content-box;
font-size: 0;
}
.left{
background: #BCE8F1;
display: inline-block;
vertical-align: top;
box-sizing: border-box;
font-size: 14px;
width: 200px;
}
.right{
background: #F0AD4E;
display: inline-block;
vertical-align: top;
box-sizing: border-box;
width:calc(100% - 200px);
font-size: 14px;
/* height:100px; */
}
这种方法是通过width: calc(100% - 140px)来动态计算右侧盒子的宽度。需要知道右侧盒子距离左边的距离，以及左侧盒子具体的
宽度(content+padding+border)，以此计算父容器宽度的100%需要减去的数值。同时，还需要知道右侧盒子的宽度是否包含border
的宽度。
在这里，为了简单的计算右侧盒子准确的宽度，设置了子元素的box-sizing:border-box;以及父元素的box-sizing: content-box;。
同时，作为两个inline-block的盒子，必须设置vertical-align来使其顶端对齐。
另外，为了准确地应用计算出来的宽度，需要消除div之间的空格，需要通过设置父容器的font-size: 0;,或者用注释消除html中的空格等方法。
方法6:float + BFC方法
这个方案同样是利用了左侧浮动，但是右侧盒子通过overflow: auto;形成了BFC，因此右侧盒子不会与浮动的元素重叠。
.content{
background:pink;
overflow: auto;
}
.left{
float: left;
width: 200px;
/* height:150px; */
background: #BCE8F1;
}
.right{
overflow:auto;
/* height:100px; */
background: #F0AD4E;
}
image.png
方法7：flex（CSS3）
.content{
background:pink;
display: flex;
}
.left{
flex:0 0 200px;
/* height:150px; */
background: #BCE8F1;}
.right{
flex: 1;
/* height:100px; */
background: #F0AD4E;
}
image.png
需要注意的是，flex容器的一个默认属性值:align-items: stretch;。这个属性导致了列等高的效果。
为了让两个盒子高度自动，需要设置: align-items: flex-start;
文件链接：https://www.cnblogs.com/vicky123/p/8866548.html
BFC:https://www.w3cplus.com/css/understanding-css-layout-block-formatting-context.html
网友评论