側邊欄+ 2個擴展內容div

Question

對不起，如果這是重複的;具體的設計問題難以定位...

<div id="sidebar"></div> 
<div id="top-expand"></div> 
<div id="bottom-expand"></div> 

側邊欄固定寬度爲200px;其他兩個div各有一個固定的高度，如果我能讓它們隨着窗戶的寬度拉伸，這將是理想的。

------------------------------------- 
|  |        | 
|  |  top-expand   | 
|sidebar|-----------------------------| 
|  |        | 
|  |  bottom-expand   | 
------------------------------------- 

側欄：固定寬度;
頂部展開：固定高度; bottom-expand：固定高度;

是否有可能有側邊欄保持固定寬度和堆疊旁邊的其他兩個div只有CSS？我不反對使用jQuery來處理窗口的計算，但它會是不錯的這部分的機CSS/HTML表示您的建議

感謝=）

Answer 1

這適用於我在Chrome。

#sidebar{ 
    border:1px solid red; 
    width:200px; 
    height:400px; 
    float:left; 
} 

#top-expand{ 
    border:1px solid blue; 
    height:200px; 
    margin-left:200px; 
} 

#bottom-expand{ 
    border:1px solid green; 
    height:200px; 
    margin-left:200px; 
} 

http://jsfiddle.net/jasongennaro/Y6dNt/

僅邊框用於顯示。

Answer 2

是的，這是可能的。將它全部包含在<div>與position: relative中，絕對放置邊欄，並給其他兩個<div> s留下一個與邊欄寬度相匹配的左邊距。

例如：

<div id="outer"> 
    <div id="sidebar">pancakes</div> 
    <div id="top-expand"></div> 
    <div id="bottom-expand"></div> 
</div> 

CSS：

#outer { 
    position: relative; 
} 
#sidebar { 
    width: 100px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    background: #00f; 
} 
#top-expand { 
    height: 100px; 
    margin-left: 100px; /* Matches the #sidebar width */ 
    background: #0f0; 
} 
#bottom-expand { 
    height: 100px; 
    margin-left: 100px; /* Matches the #sidebar width */ 
    background: #f00; 
} 

活生生的例子：http://jsfiddle.net/ambiguous/kRs54/1/

我使用的背景顏色來區分塊和更小的尺寸，以適應很好的的jsfiddle結果區域。

塊元素，如<div>，消耗所有可用寬度小於他們的利潤，除非另行指定，所以你只要給你的#top-expand和#bottom-expand元素足夠大的左旁accomadata #sidebar。當它們比側欄高時，左邊距也會將右側塊保留在正確的位置。