Html 拉伸div以适应所有屏幕大小的内容

HTML

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

是否有办法拉伸

div.sec

以适应任何屏幕大小的

div.fst

和

div.thd

留下的区域？

div.fst

和

div.thd

的宽度以像素为单位固定

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

非常感谢你的帮助

---

请看我的

小提琴

这似乎就是你想要的

考虑到您所说的

.fst

和

.thd

具有固定宽度，您可以使用从

100%

中减去

40px

值

.sec{宽度：计算（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;
}

---

你的小提琴和你的代码不一样，没有解决办法。。以你的方式。但是你可以通过使用媒体查询来实现它。对不起，fiddle更新了！非常感谢。真的很感激！

.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;
}