CSS：固定宽度动态宽度子,填充100％父宽度？

我有一个父div( – 在图表中),他的宽度我事先不知道.

我有两个孩子div(a和b)：

b – 始终是已知的固定宽度,并且应始终位于右侧.

a – 应填补剩余空间

-----------------------------------
- aaaaaaaaaaaaaaaaaaaaaaaaaa bbbb -
- a                        a b  b -
- aaaaaaaaaaaaaaaaaaaaaaaaaa bbbb -
-----------------------------------

a和b都具有相等的固定高度.

我想有一个简单的解决方案,但我还没有找到它.我试过漂浮两个,但一个或另一个被推到下面.

有任何想法吗？

你正在寻找 holy grail :)这篇文章有一个完整的例子,并通过浏览,但这里是摘要.

您的包装div需要具有与所需静态宽度列相同宽度的右边距.内部div向左浮动,静态宽度列通过使用负边距移动到填充区域.

这是教程中的标记

<div id="container">
  <div id="center" class="column"></div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
</div>

和css

#container {
  padding-left: 200px;   /* LC width */
  padding-right: 150px;  /* RC width */
}
#container .column {
  position: relative;
  float: left;
}
#center {
  width: 100%;
}
#left {
  width: 200px;          /* LC width */
  right: 200px;          /* LC width */
  margin-left: -100%;
}
#right {
  width: 150px;          /* RC width */
  margin-right: -150px;  /* RC width */
}

本教程是一个2列示例,但是如果你摆脱了左列并从容器中删除了左边的填充,你应该很高兴.