两列布局(左边固定,右边自适应)

最快速的方法flex布局

而且左右盒子的高度一定相等

<div class="warp">
    <div class="left" id="left">left</div>
    <div class="right" id="right">right</div>
</div>

*{
    padding:0;
    margin:0;
}
.warp{
    display:flex;
}

.left{
    width:200px;
    background: red;
}

.right{
    flex:1;
    background: blue;
}

脱离文档流的布局

因为浮动或定位已经脱离文档流,如果想让左右等高,需要js设置高度

定位

*{
    padding:0;
    margin:0;
}

.left{
    width:200px;
    position: absolute;
    background: red;
}

.right{
    margin-left:200px;
    background: blue;
}

/**
*  左右高度时刻相等
*/
var right = document.getElementById("right");
var left = document.getElementById("left");

if(right.offsetHeight>left.offsetHeight){
    left.style.height = right.offsetHeight + 'px';
}else{
    right.style.height = left.offsetHeight + 'px';
}

浮动

*{
    padding:0;
    margin:0;
}

.left{
    width:200px;
    float:left;
    background: red;
}

.right{
    margin-left:200px;
    background: blue;
}