DIV佔據了它左側的可用寬度

Question

我正在開發我正在構建的未來網站的心理圖片，並且偶然發現了一個我無法回答的問題。

基本上，將會有一個180px寬的垂直導航菜單。高度將設置爲100％，位置：固定;頂部：0 ;.這樣，當你沿頁面滾動時div會跟着你......但問題是，div會有不同的背景顏色，然後是身體或頁面的其餘部分，我試圖將div嵌套在裏面一個980px寬的頁面。我希望該div左邊的所有內容都是相同的背景色。我無法指定寬度的原因是導航的寬度爲180像素，但寬度爲180像素，無論菜單的左側如何。要清楚地理解，這是一個靈活的解決方案，但沒有將div的左側設置爲正確的顏色：http://jsfiddle.net/kkFc7/這是一個解決方案，可以實現我想要的外觀，但只有在1200像素寬的瀏覽器中，如果瀏覽器較寬，則可以使用http://jsfiddle.net/kkFc7/1/會留在窗口的左側，但我不想那樣。我希望div容納在容器內，但左邊的背景顏色應該是相同的。

該算法類似於（（browserwidth-800px）/ 2）+ 180px = div＃menu的寬度。

我不想使用任何算法或JavaScript來完成。有沒有人知道一些CSS技巧，這將使我獲得一個靈活的DIV，它佔據左邊的寬度？

Answer 1

可以創建一個div，佔用50％的寬度的#content DIV

jsfiddle example（full-screen）

像後面，從而

<div id="menu-bg-color-matchtastic"></div> <!-- <<< Add this div --> 
<div id="content"> 
<div id="menu"> 
    Hello<br> 
    Goodbye 
</div> 
</div> 

添加類似的屬性作爲菜單，背景顏色，固定位置...

#menu-bg-color-matchtastic { 
    position:fixed; 
    width:50%; 
    height:100%; 
    left:0;top:0; 
    background:#494949; 
} 

使#content位置相對於一個白色bkgd，所以我們的新div留在內容後面

#content { 
    width:980px; 
    height:2000px; 
    margin:0 auto; 
    background:#fff; /* <<< Add this */ 
    position:relative; /* <<< and this */ 
}