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/