Html 占据其左侧可用宽度的DIV

我在脑海中勾勒出一幅我正在建设的未来网站的图景，无意中发现了一个我无法回答的问题

基本上，将会有一个180像素宽的垂直导航菜单。高度设置为100%，位置：固定；顶部：0；。这样，当您滚动页面时，div将跟随您。。。然而，问题是，div的背景颜色与页面的主体或其他部分不同，我正试图将div嵌套在一个980px宽的页面中。我希望该div左侧的所有内容都是相同的背景色。我无法指定宽度的原因是，导航的宽度将为180px，但菜单左侧的宽度将为180px+任何值。要清楚地理解，这是一个灵活的解决方案，但没有将div的左侧设置为正确的颜色：这是一个可以实现我想要的外观的解决方案，但只有在1200px宽的浏览器中，如果浏览器更宽，它将只停留在窗口的左侧，但我不希望这样。我希望div保存在容器中，但是它左侧的背景色应该是相同的

算法类似于（（browserwidth-800px）/2）+180px=div#菜单的宽度

---

我宁愿不使用任何算法或JavaScript来完成。有人知道一些CSS技巧可以让我得到一个灵活的DIV，它占据左侧的宽度吗？

可以创建一个DIV，它占据

#content

DIV后面50%的宽度

（）

像这样

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

使

#content

位置与白色bkgd相对，以便我们的新div保留在内容后面

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

#内容{
宽度：980px；
高度：2000px；
保证金：0自动；
背景：#fff/*
#content {
    width:980px;
    height:2000px;
    margin:0 auto;
    background:#fff; /* <<< Add this */
    position:relative; /* <<< and this */
}