左边固定，右边自适应

<div class="container" style="width: 100%">
    <div class="left" style="background: red; width: 100px; height: 100px;"></div>
    <div class="right" style="background: blue;height: 100px;"></div>
</div>

方法一：固定元素左浮动脱离标准文档流，右边元素设置左外边距

.container{
    overflow: hidden;   
}
.left{
    float: left;
}
.right{
    margin-left: 300px;
    width: 100%;
}

方法二：一样，利用定位脱离标准文档流。右元素不加左边距也可以，被压在下面。宽度100%不加也可以。

.container{
    position: relative;
}
.left{
    position: absolute;
}
.right{
    margin-left: 300px;
    width: 100%;
}

方法三(IE7以下不支持)：固定元素必须table-cell，右侧元素可以不加。

.container{
    display: table;
}
.left{
    display: table-cell;
}
.right{
    display: table-cell;
}

方法四：flex布局设置右元素占父元素的比例为1

.container{
    display: flex;
}
.right: {
    flex: 1;
}

方法五：calc()计算属性

.left{
    float: left;
}
.right{
    float: right;
    width: calc(100% - 100px);
}