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 */ 
}