div填补余下的空间（宽度）

Question

嘿那里我有一个100％的宽度（电脑屏幕的宽度可以是任何东西）在这个宽度内我有两个孩子的div一个固定宽度说50px，我想别的孩子div来占用剩余的（100％-50px）空间谁能告诉我我如何做到这一点请....

我在此代码，如果50做过类似

<div style="width:100%;min-height:90px;"> 
<div style="float:left;width:50px;height:60px;"> 
</div> 
<div style="float:left;width:90%;height:60px;"> 
</div> 
</div> 

px不是屏幕的10％，有一些我不想要的空白空间

Answer 1

你可以使用表布局：

HTML：

<div class="container"> 
    <div class="fixed-width"></div> 
    <div class="fluid-width"></div> 
</div> 

CSS：

.container { 
    display: table; 
    table-layout: fixed; 
    width: 100%; 
} 

.fixed-width { 
    display: table-cell; 
    width: 50px; 
} 

.fluid-width { 
    display: table-cell; 
} 

http://jsfiddle.net/myajouri/zJq8N/

OR ...

您可以使用width: calc(100% - 50px)这是not supported in IE8 and below。

.container { 
    width: 100%; 
} 

.fixed-width { 
    float: left; 
    width: 50px; 
} 

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

http://jsfiddle.net/myajouri/mTq6x/

Answer 2

jsFiddle

只有浮在固定宽度的元件。

CSS：

.container { 
    height: 10px; 
    width: 100%; 
} 
.right { 
    background: red; 
    height: 10px; 
} 
.left { 
    background: blue; 
    width: 50px; 
    height: 10px; 
    float: left; 
} 

HTML：

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