展開左div以取指定高度的剩餘寬度，不交換元素

Question

在此標記爲重複項之前，請聽我說。我想要一個由2列或更多列組成的列布局。第一個div（左邊的元素）應該展開以佔據剩餘的寬度，而右邊的列具有特定的寬度。儘管沒有描述這種情況，但StackOverflow存在大量的這些問題。

我可以使用表格佈局; （http://jsfiddle.net/j08691/NmrbP/6/）

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

這種方法的問題是，我可以不把桌子的高度（高度爲任何table-cell忽略）和列布局應該被拉伸以適應家長的高度的100％ 。

我可以利用浮動元素結合overflow:hidden; （http://jsfiddle.net/SpSjL/）

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

這種方法的問題在於元件已經交換（即左側元件在右後所定義的）的事實。這對於響應式網站無效，左側的元素應該顯示在正確的元素之前（例如SmartPhones）。 AFAIK我不能用純CSS來交換元素，我必須爲較小的分辨率做這些。

任何解決方案？

TL; DR我想要第一個（左）列擴大，而其餘的都有特定的寬度。所有列必須具有100％的高度（即適合父母的身高），並且元素不應該在標記中交換位置。

Answer 1

尋找calc() function in css3 ??

您的解決方案在這裏：http://jsfiddle.net/NmrbP/19/

包裹一切master容器內，然後把它們飄浮....（不要忘了清除浮動）

CSS

#master { 
    width:100%; 
    height:100%; 
    border:1px solid #000; 
} 
#divLeft { 
    float:left; 
    background-color: lightgreen; 
    width: calc(100% - 250px); /* extra loaded stuff by me */ 
    width: -moz-calc(100% - 250px); /* to make cross browser */ 
    width: -webkit-calc(100% - 250px); /* to make cross browser */ 
    height:100%; /* give div full height */ 
} 
#divRight { 
    float:left; 
    background-color: lightblue; 
    vertical-align: top; 
    width : 250px; /* extra loaded stuff by me */ 
    height:100%; /* give div full height */ 
} 

.clr{ 
    clear:both; /* extra loaded stuff by me */ 
}