html - 拉伸(stretch) 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;
}

有没有办法拉伸(stretch) div.sec 以适应 div.fst 和 div.thd 在任何情况下留下的区域屏幕尺寸？ div.fst 和div.thd 的宽度以像素为单位固定。

有没有只用css的解决方案？

非常感谢您的帮助!

请看我的fiddle http://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;
}