展开左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 */ 
}