簡単に言うと、私のクライアントは、彼が特に望んでいたデザインが 100% 幅のヘッダー ラッパーを要求し、ロゴを含む内部 div が 1300px 幅であるプロジェクトを私に依頼しました。
問題は、たとえば、私の 23 インチの画面では問題なく表示されますが、小さい画面では大きなギャップがあり、ラッパー div の内側の div がすべてずれていることです。
たとえば、2 つの div があるとします。内側の div は赤、外側の div は暗い青、背景は緑です。大きな画面では、これが表示されます (これが必要です)。
-------------------------------------------------------------------
| -----------------------------------| |
| | | end Of window->|
| |red centered in the middle(1300px wide) green **not** seen|
| ----------------------------------- |
| wrapper header div @ 100% (DARKBLUE) |
| ------------------------------------------------------------------
上記の例では、ヘッダー ラッパーの div が 100% であるため、ヘッダーに緑が表示されません。
たとえば、my13'mac/iphone/sammy タブレットなどの小さな画面で
私はこれを得る
------------------------------------------------------------------------------|
-----------------------------------| | |
| | | endOf parent header div |
| red | | <--pushed all the way left |
----------------------------------- | |
wrapper header div @ 100% (DARKBLUE) | GREEN |
------------------------------------------------------------------------------|
したがって、私が説明しようとしているのは、小さな画面では、中央の div が左端まで押し込まれ、緑色が表示されるということです....
理由についてのアイデアはありますか？繰り返しになりますが、すべての大きな画面では問題ありませんが、小さな画面では壊れます...
これらに適用した CSS は非常に単純です。
RED div は次のとおりです。
#topRow{
width:100%;
height:120px;
background-image:url(../../images/menuStripBg.png);
background-repeat:repeat-x;
}
内側の div (DARKBLUE) は次のとおりです。
#topRowInner{
min-width:1300px;
margin:0px auto;
}
今、問題は、小さな画面では、内側（濃い青）のdivの幅が1300pxであるためです。小さい画面の解像度が 1300 未満である場合、100% の画面はそれをスローします。本質的に、親ラッパーの 100% が 1300 未満の場合、1300 を中央に配置できません.....
それが意味があるかどうかわからない....
いずれにせよ、これが問題である場合、これを回避する方法はありますか?
それが問題でない場合は、ヒント/ヒントなどをいただければ幸いです。
ありがとうございます。