Question

我正在开发一个我正在建设的未来网站的心理图片，并偶然发现了一个我无法回答的问题。

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

算法类似于（（browserwidth-800px）/ 2）+ 180px = 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 */
}

占用其左侧可用宽度的DIV

1 个答案: