[CSSチュートリアル]CSSは、2列のレイアウト、固定幅の左側、適応するためのさまざまな方法の右側を達成するために

.box>div{height: 100%;}
#box1>div{float: left;}
.left1{width: 100px;background: yellow;}
.right1{background: #09c;width:calc(100% - 100px);}

<div class="box" id="box1">
    <div class="left1">left fixed width</div>
    <div class="right1">right side adaptive</div>
</div>

.box{overflow: hidden;height: 100px;margin: 10px 0;}
.box>div{height: 100%;}
.left2{float: left;background: yellow;width: 100px;}
.right2{background: #09c;margin-left: 100px;}

<div class="box" id="box2">
    <div class="left2">left fixed width</div>
    <div class="right2">right side adaptive</div>
</div>

.box{overflow: hidden;height: 100px;margin: 10px 0;}
.box>div{height: 100%;}
.left3{float: left;background: yellow;width: 100px;}
.right3{background: #09c;overflow: hidden;}

<div class="box" id="box3">
    <div class="left3">left fixed width</div>
    <div class="right3">Right-side adaptive</div>
</div>

.box{overflow: hidden;height: 100px;margin: 10px 0;}
.box>div{height: 100%;}
#box4{position: relative;}
.left4{position: absolute;left: 0;top:0;width: 100px;background: yellow;}
.right4{margin-left:100px;background: #09c;}

<div class="box" id="box4">
    <div class="left4">left fixed width</div>
    <div class="right4">right adaptive</div>
</div>

.box{overflow: hidden;height: 100px;margin: 10px 0;}
.box>div{height: 100%;}
#box5{position: relative;}
.left5{position: absolute;left: 0;top:0;width: 100px;background: yellow;}
.right5{position: absolute;left: 100px;top:0;right: 0;width: 100%;background: #09c;}

<div class="box" id="box5">
    <div class="left5">left fixed width</div>
    <div class="right5">Right-side adaptive</div>
</div>

.box{overflow: hidden;height: 100px;margin: 10px 0;}
.box>div{height: 100%;}
#box6{display: flex;display: -webkit-flex;}
.left6{flex:0 1 100px;background: yellow;}
.right6{flex:1;background: #09c;}

<div class="box" id="box6">
    <div class="left6">left fixed width</div>
    <div class="right6">right adaptive</div>
</div>

.box{overflow: hidden;height: 100px;margin: 10px 0;}
.box>div{height: 100%;}
#box7{display: table;width: 100%;}
#box7>div{display: table-cell;}
.left7{width: 100px;background: yellow;}
.right7{background: #09c;}

<div class="box" id="box7">
    <div class="left7">left fixed width</div>
    <div class="right7">right adaptive</div>
</div>