Javascript CSS-如果用户调整浏览器大小并水平滚动，如何防止内容div在固定pos左侧菜单上重叠？

这里有一张图片要澄清一下

编辑--工作小提琴：

我无法找到一个工作的js提琴来重现我的问题，这个问题存在于我为工作而开发的网站上，所以我也不能仅仅链接网站。我可以粘贴一些代码，但让我先解释一下：

• 我有一个固定的左菜单
• 我有一个内容部分，它应该始终位于左侧菜单未占据的剩余区域的中心（因此它不是位于页面的真正中心，而是由于左侧菜单的存在而向右移动）

CSS:

HTML

菜单项~
asdf





















asdf





















asdf





















asdf

---

我非常感谢你的帮助。我在1.5个月前就遇到了这个问题，无法修复它，我认为这是一个边缘问题，不重要，但长话短说，现在是：P非常感谢您的时间。

媒体查询和基于%的主要内容宽度示例

---

媒体查询和基于%的主内容宽度示例

---

您已经花了很多精力发布您的问题，但是您发布的HTML代码不足以重新创建您的前提。你应该让它更现实，更新你的问题，理想情况下提供一个关于我认为你正在寻找实现一个基于网格的视图的工作示例。看看使用Twitter引导网格系统，它在我自己的项目中帮助了我很多。还有很多，但我没有亲自使用过。这里有一个jsfiddle，希望它会有用：主要问题是，我希望橙色部分位于空白的中心，假装左侧菜单空间在计算中无法计算。编辑——真的很难看到（在我看来，除非你对CSS很在行，并且能“得到”我想要展示的东西！）因为视图空间非常有限，所以小提琴中发生了什么，这是一个在800-1200px范围内调整windows大小的问题。这当然需要媒体查询来更改内容分区的宽度。我在OP中添加了一个提琴，清楚地说明了我面临的主要问题。如何防止中心重叠到左侧？也许需要jq onscroll事件来动态调整边距吗？您在发布问题时付出了很多努力，但您发布的HTML代码不足以重新创建您的前提。你应该让它更现实，更新你的问题，理想情况下提供一个关于我认为你正在寻找实现一个基于网格的视图的工作示例。看看使用Twitter引导网格系统，它在我自己的项目中帮助了我很多。还有很多，但我没有亲自使用过。这里有一个jsfiddle，希望它会有用：主要问题是，我希望橙色部分位于空白的中心，假装左侧菜单空间在计算中无法计算。编辑——真的很难看到（在我看来，除非你对CSS很在行，并且能“得到”我想要展示的东西！）因为视图空间非常有限，所以小提琴中发生了什么，这是一个在800-1200px范围内调整windows大小的问题。这当然需要媒体查询来更改内容分区的宽度。我在OP中添加了一个提琴，清楚地说明了我面临的主要问题。如何防止中心重叠到左侧？jq onscroll事件是否需要动态调整利润率？

#wrap {
    width:100%;
    background-image:url('../images/Imagine/bg_image44.png');
    background-attachment:fixed;
} 

#top {

}

#left {
    position:fixed;
    border:1px solid red;
    background:pink;
    width:250px;
}
#positioner {
    margin-left:250px;
    width:auto;
    background:grey;
}
#content {
    border:1px solid green;
    width:700px;
    margin:auto;
}

<div id="wrap">
    <div id="top"></div>
    <div id="left">menu item~~~~~<br /><br /><br />menu item~~~~~<br /><br /><br />menu item~~~~~<br /><br /><br />menu item~~~~~<br /><br /><br />menu item~~~~~<br /><br /><br />menu item~~~~~<br /><br /><br /></div>
    <div id="positioner">
        <div id="content">asdf<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

            asdf<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            asdf<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
            asdf<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        </div>
    </div>
</div>

.content {
  width:35%;
  margin:0 auto;
}

@media (min-width: 720px) {

  .content {width:43%;}
}

@media (min-width: 960px) {

  .content {width:55%;}
}

@media (min-width: 1024px) {

  .content {width:60%;}
}

@media (min-width: 1180px) {

  .content {width:65%;}
}