将宽度设置为父级的剩余部分 - 动态宽度

Question

我在固定宽度的容器中有2个div。

div1具有动态宽度，最大为50％。我希望div2填充容器宽度的其余部分。

<div id="container">

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

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

</div>

以下是jsfiddle的示例。

完全展开为：http://jsfiddle.net/RuD74/

由于right未展开而导致的容器背景可见：http://jsfiddle.net/hgpcp/1/

我怎样才能做到这一点？

Answer 1

更新了JFiddle：http://jsfiddle.net/d5U96/2/

我明白你要做什么。相反，将第二个div设置为：

#right {
    overflow: hidden;
    height: 100%;
    background-color: blue;
}

通过这样做，除了第一个浮动div占用的空间外，它占用了剩下的所有可用宽度。希望这能满足您的需求。

Answer 2

您可以使用它将红色/左侧框的最小宽度设置为50％。这取决于你想用它做什么。

#left {
float: left;

min-width: 50%;
max-width: 50%;
height: 100%;

background-color: red;

这样你的div1获得了你的块的最小宽度。 唯一不利的是，如果你愿意的话，你不能让它变小。