CSS：固定宽度+；动态宽度子项，填充100%父项宽度？

我有一个父div（-在图中），它的宽度我事先不知道

我有两个孩子（a和b）：

b-始终是一个已知的固定宽度，并且应始终位于右侧

a-应填满剩余空间

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

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

我想有一个简单的解决办法，但我还没有找到。我试着让两个都浮起来，但其中一个被推到下面

有什么想法吗？

尤其是在右侧需要固定大小的容器时： （这对移动设备来说更有意义。）

Sry，实际上我想是这个：

---

可能您可以像这样使用

display:table

属性

html:

但它不支持IE7

或者你可以这样做：

html:

检查这个

---

新小提琴

这一个使用浮点数，而上面的另一个优秀答案使用定位。选择哪一个取决于你自己。每种方法都有其优缺点

CSS

HTML

内容

边栏

页脚

这是一种干净且非常可接受的方式。充分利用浮点数的工作原理，在这里使用了clear fix，但要清除浮点数，还可以在容器结束标记之前使用一个额外的div，上面有

clear:right

您正在寻找：）这篇文章有一个完整的示例和演练，但这里是总结

包装div需要有一个与所需的静态宽度列宽度相同的右填充。内部div向左浮动，静态宽度列通过使用负边距移入填充区域

以下是教程中的标记

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

---

本教程是一个2列的示例，但是如果您去掉了左列并从容器中删除了左填充，您应该可以继续使用。

关于

display:flex

#parent{   
    background:yellow;  
    display:inline-flex;
}
.left{
    display:flex;
    flex: 1 1 auto;
}
.right{   
    display:flex;  
    background-color:red;
}

---

解决方案是否必须确保a和B的高度相等？还是说他们已经一样高了？还是没关系？@thirtydot-它们是相等和固定高度（更新问题）经典的“简单解决方案”已经发布。一个

div

带

float:right

，另一个

margin right

等于右侧

div

的宽度。谢谢-这是很多div！嗯，很有趣-浏览器对此的支持是什么样的？您更新的答案看起来很有希望-我会试试看。谢谢。第一个版本不支持IE7及以下版本，但第二个版本支持所有浏览器。第二个版本的唯一问题是，a版扩展到b版之后。我猜这是因为使用了正确的填充。我会尝试margin-right。是的，使用margin-right而不是padding-right检查更新的fiddle我喜欢这个主意，但似乎将padding-right添加到包含div只是扩展了它，而不是压缩子项。右列可能只需要调整css以使其正确显示。我已经用一些html更新了我的答案来尝试

<div class="right">fixed</div>
<div class="left"></div>

.right {float:right; width:200px; }
.left { background: green;}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, button,
table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; }
body { font: normal 100%/1.5em "Helvetica Neue", Helvectica, Arial, sans-serif; color: #353E34; background: #FFF; text-align: left; }
html>body { font-size: 16px; }
.content-wrapper { width: 100%; float: left; }
.content { margin-right: 220px; background: #9CC; }
.sidebar { float: right; width: 200px; margin-left: -200px; background: #FDE95E; }
.inner { margin: 10px; }
.footer { clear: left; width: 100%; background: black; color: #FFF; text-align: center; padding: 4px 0; }

<div class="content-wrapper">
  <div class="content">
    <div class="inner">
      <p>Content</p>
    </div>
  </div>
</div>
  <div class="sidebar">
    <div class="inner">
      <p>Sidebar</p>
    </div>
  </div>
  <div class="footer">
    <p>Footer</p>
  </div>

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

#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 */
}

#parent{   
    background:yellow;  
    display:inline-flex;
}
.left{
    display:flex;
    flex: 1 1 auto;
}
.right{   
    display:flex;  
    background-color:red;
}