如何獲得2列的佈局，其中一列的寬度固定，另一列的寬度是剩餘的？

Question

我有一個2列布局。左欄的寬度爲300px。我希望右欄佔據剩餘監視空間的全部寬度。但我無法弄清楚這個px和％的混合體是如何工作的？有人有主意嗎？

我想我可以使用js來獲取用戶的視口寬度並動態地添加一些內聯樣式，但然後我將不得不在每個窗口調整大小等。所以我寧願有一個純粹的CSS解決方案。

Answer 1

我寧願thirtydot's answer：

Demo fiddle。

最低CSS要求：

#sideBar { 
    width: 300px; 
    float: left; 
} 
#mainContent { 
    overflow: hidden; 
} 

Answer 2

這是一個可行的方法給你：http://jsfiddle.net/mqchen/RDLMm/

Answer 3

一種方法是到左邊浮動的固定寬度列，然後用保證金來模擬你的另一列。事情是這樣的：

<div id="sidebar"> 
    <!-- ... --> 
</div> 
<div id="content"> 
    <!-- ... --> 
</div> 

和一些CSS：

#sidebar { 
    float: left; 
    width: 300px; 
} 
#content { 
    margin-left: 300px; 
} 

一個<div>其默認display:block自然會佔用所有可用的寬度。 300px的左邊距爲固定寬度列留出空間。

例子：http://jsfiddle.net/ambiguous/wdsbu/