CSS：固定宽度+动态宽度儿童，填充100％父宽度？

Question

我有一个父div（ - 在图中）谁的宽度我不知道提前。

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

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

一个 - 应填充剩余空间

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

a和b都等于固定高度。

我想有一个简单的解决方案，但我还没有找到它。我已经尝试过两种方式，但其中一个或另一个被推到下面。

任何想法？

Answer 1

http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts

尤其是今年，因为你想在右侧固定大小的容器： （这确实让为移动设备更有意义。） http://matthewjamestaylor.com/blog/perfect-2-column-right-menu.htm

Sry基因，其实这一个我猜： http://matthewjamestaylor.com/blog/ultimate-2-column-right-menu-pixels.htm

Answer 2

可能是你可以使用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;} 

检查这个http://jsfiddle.net/47YMn/1/

新小提琴http://jsfiddle.net/sandeep/47YMn/7/

Answer 3

这一个使用浮动，而上面的其他优秀答案使用定位。这取决于你选择的。各有其优点和缺点。

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> 

Answer 4

这是一个干净，非常可以接受的方式。充分利用漂浮物在这里的工作原理，在这里使用了明确的解决方案，但是要清除漂浮物，您还可以在容器关闭标签之前使用一个额外的div，上面有clear:right。

http://jsfiddle.net/sg3s/sSJvT/

Answer 5

您正在寻找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列的例子，但如果你摆脱左侧立柱和去除左填充你应该很容易走的容器。

Answer 6

display: flex怎么样？

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

http://jsfiddle.net/NCkL4/1037/