伸展一個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; 
}