1

这是一张图片来澄清一点

在此处输入图像描述

编辑——工作小提琴：http: //jsfiddle.net/YE7ZZ/

我无法获得一个有效的 js fiddle 来重新创建我的问题，该问题存在于我正在开发的工作网站上，因此我也不能只链接该网站。我可以粘贴一些代码，但让我先解释一下：

  • 我有一个固定的 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 非常感谢您的宝贵时间。

4

1 回答 1

1

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

代码笔示例

.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%;}
}
于 2013-10-04T19:55:23.230 回答