伸展一个div以适应所有的屏幕尺寸

Question

HTML

<div class="whole"> 
    <div class="fst"></div> 
    <div class="sec"></div> 
    <div class="thd"></div>  
</div> 

CSS

.whole { 
    width: 100%; 
    height: 20px; 
} 
.whole div { 
    height: 20px; 
    display: inline-block; 
    position: relative; 
} 
.fst { 
    float: left; 
    width: 20px; 
    background: blue; 
} 
.sec { 
    background: red; 
} 
.thd { 
    float: right; 
    width: 20px; 
    background: blue; 
} 

内容是否有办法伸展div.sec以适应由div.fst和离开该地区任何屏幕尺寸的div.thd？ div.fst和div.thd的宽度已修复为像素。

有没有解决方案只有CSS？

真的很感谢您的帮助！

请参阅我fiddlehttp://jsfiddle.net/vHHcf/

Answer 1

这似乎是你想要的。

jsFiddle example

既然你说.fst和.thd有固定的宽度，可以使用calc()从100%减去40px值。

.sec { width:calc(100% - 40px); }

更新CSS

.whole { 
    width: 100%; 
    height: 20px; 
} 
.whole div { 
    height: 20px; 
    display: inline-block; 
    position: relative; 
} 
.fst { 
    float: left; 
    width: 20px; 
    background: blue; 
} 
.sec { 
    background: red; 
    width:calc(100% - 40px); 
} 
.thd { 
    float: right; 
    width: 20px; 
    background: blue; 
}