css - div を 100% - 一部の px にするにはどうすればよいですか?

Question

私は2つの部門を持っています。左のものを200pxにしたい。画面の幅が何であれ、右側のものをいっぱいにしたい - 200px。つまり、左側の div が描画された後、右側の div は使用可能なスペースの 100% になるはずです。これを行う純粋なcssの方法はありますか?

大まかな例

<div class='l'></div><div class='r'></div>
.l {
    display:inline-block;
    background:green;
    width:100px;
    height:20px;
}

.r {
    background:red;
    height:20px;
}

Answer 1

動作中のjsFiddleデモ

次のマークアップを検討してください。

<div id="fixed">Fixed Width</div>
<div id="flexible">Flexible Width</div>

そしてあなたのCSSで：

#fixed {
    background: red;
    float: left;
    width: 200px;
}

#flexible {
    margin-left: 200px;
    background: green;
}