CSS佈局（2列布局，但是如果沒有側欄主列必須100％寬）

Question

列1（左）用於內容。 Column2（右側/側邊欄）用於相關信息。說佈局是66％/ 34％。如果沒有側邊欄內容，我需要一種方法讓Column1自動伸展到100％。有任何想法嗎。我知道這是可以做到的。我只是不記得如何。

+---------+---------+ 
| Content | sidebar | 
+---------+---------+ 


+-------------------+ 
|Content/ no-sidebar| 
+-------------------+ 

Answer 1

你可能會嘗試這樣的事情。下面是兩種不同的HTML情況：

隨着側邊欄：

<div id="container"> 
    <div id="sidebar">some content</div> 
    <div id="main_content">main content</div> 
</div> 

沒有側邊欄：

<div id="container"> 
    <div id="main_content">main content</div> 
</div> 

這裏是CSS的有條件改變main_content div的大小：

#container { 
    overflow: hidden; 
} 

#sidebar { 
    width: 34%; 
    float: right; 
} 

#main_content { 
    width: 100%; 
    float: left; 
} 
#main_content:nth-child(2) { 
    width: 66%; 
} 

Answer 2

您可以設置HTML像;

<div id="container"> 
    <div id="content">content 
     <div id="sidebar">sidebar</div> 
    </div> 
</div> 

和CSS一樣;

#container{ 
    width: 100%; 
} 
#sidebar, #content{ 
    height: 200px; 

} 
#sidebar{ 
    width: 200px; 
    float: left; 
} 
#content{ 
    background: orange; 
} 

您可以用百分比替換px。 Here是一個現場演示。