CSS-如果用戶調整瀏覽器的大小並水平滾動，如何防止內容div在固定的pos左菜單上重疊？

Question

這是要澄清一點的圖片

編輯-工作小提琴： http : //jsfiddle.net/YE7ZZ/

我無法正常工作的JS小提琴來重新創建我的問題，該問題存在於我正在開發的網站上，因此我也不能僅鏈接該網站。 我可以粘貼一些代碼，但讓我先解釋一下：

• 我有一個固定的pos左菜單
• 我有一個內容部分，應始終將其放置在剩余區域的中心，而不是其被左側菜單占據（因此，它並不是位於頁面的真正中心，而是由於左側菜單的存在而向右移動）。

CSS：

#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;
}

HTML

<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>

非常感謝您的幫助。 我在1.5個月前遇到了這個問題，無法解決，並認為這是一個非常好的情況，但是長話短說，現在它確實：P非常感謝您的時間。

Answer 1

媒體查詢和基於％的主要內容寬度的示例

Codepen示例

.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%;}
}