左边宽度固定右边自适应

在写页面布局的时候经常要用到左边宽度固定右边自适应

第一种写法：

.left {

 position: absolute;  

height: 100%;  

width: 300px;

background-color: blue;

}

.right {

height: 100%;

 margin-left: 300px;

background-color: red;

}

这种写法有个问题，right的宽度是占满整个屏幕，如果right想实现拖拽功能，发现拖拽到左边300像素的时候，不能在往往左边拖拽了，那是因为有个margin-left值

所以一般会采用第二中方法写左边宽度固定右边自适应

.left {

float: left;  

height: 100%;

width: 300px;

 background-color: blue;

}

.right {

overflow: auto;  

height:100%;

background-color: red;

}

转载于:https://www.cnblogs.com/jiayingzi/p/6273346.html