1

ここに少し明確にするための画像があります

ここに画像の説明を入力

編集 - 作業フィドル: http://jsfiddle.net/YE7ZZ/

仕事用に開発しているサイトに存在する問題を再現するための動作するjsフィドルを取得できなかったため、まだWebサイトをリンクすることもできません。コードの一部を貼り付けることができますが、最初に説明させてください。

  • 固定位置の左メニューがあります
  • 左メニューが占めていない残りの領域の中央に常に配置する必要があるコンテンツセクションがあります（したがって、ページの真の中央に配置されるのではなく、左メニューが存在するために右にシフトされます）。

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 に答える