我有一个父级div（在图表中为“-”），其宽度我事先不知道。
我有两个子div（a和b）：
b - 总是一个已知的固定宽度，并且应始终位于右侧。
a - 应该填充剩余空间
-----------------------------------
- aaaaaaaaaaaaaaaaaaaaaaaaaa bbbb -
- a a b b -
- aaaaaaaaaaaaaaaaaaaaaaaaaa bbbb -
-----------------------------------
这里有两个等高的元素 a 和 b。
我认为这个问题应该有一个简单的解决方案，但我还没有找到。我尝试过让它们都浮动起来，但其中一个会被推到下面。
有什么想法吗？
<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 */
}
这个教程是一个两列的示例，但是如果你去掉左边的列，并从容器中删除左内边距，那么你就可以开始了。
也许您可以像这样使用display:table属性 http://jsfiddle.net/sandeep/NCkL4/8/
HTML：
<div class="left"></div>
<div class="right">fixed</div>
CSS：
#parent{
overflow:hidden;
background:yellow;
position:relative;
display:table;
}
.left{
display:table-cell;
}
.right{
background:red;
width:50px;
height:100%;
display:table-cell;
}
但它不支持IE7。
或者你可以这样做：
HTML：
<div class="right">fixed</div>
<div class="left"></div>
CSS：
.right {float:right; width:200px; }
.left { background: green;}
请查看此链接
新的示例代码请参考此链接
display: flex 怎么样？#parent{
background:yellow;
display:inline-flex;
}
.left{
display:flex;
flex: 1 1 auto;
}
.right{
display:flex;
background-color:red;
}
http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts
特别是因为您想要在右侧使用固定大小的容器： （这对移动设备更有意义..） http://matthewjamestaylor.com/blog/perfect-2-column-right-menu.htm
抱歉，实际上我想说的是这个链接： http://matthewjamestaylor.com/blog/ultimate-2-column-right-menu-pixels.htm
这个使用浮动，而另一个优秀的答案使用定位。你可以选择哪种方法。每种方法都有其优点和缺点。
CSS
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; }
HTML
<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>
这是一种干净且非常可接受的方式。利用浮动的工作原理，使用了清除浮动技巧，但是为了清除浮动，您还可以在容器结束标签之前添加一个带有clear:right的额外div。
float: right的div，另一个带有右侧div宽度相等的margin-right。 - thirtydot