html - 占据其左侧可用宽度的 DIV

Question

我正在构思我正在构建的 future 网站，并偶然发现了一个我无法回答的问题。

基本上，会有一个大约 180 像素宽的垂直导航菜单。高度将设置为 100%，位置:固定；顶部:0；。这样，当您沿着页面滚动时，div 将跟随您......但是，问题是，div 将具有与主体或页面其余部分不同的背景颜色，我试图将 div 嵌套在里面一个 980px 宽的页面。我希望该 div 左侧的所有内容都具有相同的背景颜色。我无法指定宽度的原因是因为导航的宽度为 180px，但宽度为 180px + 菜单左侧的任何内容。要清楚地理解，这是一个灵活的解决方案，但没有将 div 的左侧设置为右侧颜色:http://jsfiddle.net/kkFc7/这是一个实现我想要的外观的解决方案，但仅适用于 1200 像素宽的浏览器 http://jsfiddle.net/kkFc7/1/如果浏览器更宽，它只会停留在窗口的左侧，但我不希望这样。我希望 div 保留在容器内，但它左侧的背景颜色应该相同。

算法类似于 ((browserwidth-800px)/2)+180px=width of div#menu。

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

Answer 1

可以在 #content div 后面创建一个占宽度 50% 的 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 */
}