左边宽度固定右边自适应

Posted 2020-08-27 jiayingzi

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

第一种写法：

.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;

}