Div 占据整个剩余宽度[重复]

我有一个父 div 和里面的 2 个 div。第一个子 div 宽 50 像素，高 100%。第二个子 div 的高度为 100%，我用它来占据其余的宽度（100% - 50px），我该怎么做？

这是我创建的小提琴：http://jsfiddle.net/muGty/基本上我希望蓝色 div（右）完全占据灰色容器的其余部分。

<div class="parent">
    <div class="left"></div>
    <div class="right"></div>
</div>

你的意思是像this?

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

CSS

html, body {
    height: 100%;
}

#left {
    width:200px;
    float:left;
    background: #f00;
    height: 100%;
}
#right {
    margin-left: 200px;
    background: #0f0;
    height: 100%;
}

Update:

您还可以使用calc()CSS3 中的属性，这将简化这个过程，例如

html, body {
    height: 100%;
}

#left {
    width:200px;
    float:left;
    background: #f00;
    height: 100%;
}

#right {
    float: left;
    background: #0f0;
    height: 100%;
    width: calc(100% - 200px); /* Negate the fixed width element value from 100% */
}

Demo 2