基本的に、ブラウザのサイズを変更すると、幅 100% の Div ラッパーが正しく機能しません。ブラウザーのサイズをページのデザインよりも小さくすると、水平スクロール バーが表示されますが、実際には全幅ではありません。ある時点でちょうど切れているようなものです。
ここにリンクがあります:ウェブサイトリンク
私はこれを修正しようとしましたが、なぜこれが起こっているのか本当に混乱しています. 誰でもこの問題に光を当てることができますか?
前もって感謝します。
マーク
私はそれを考え出した!width: 100% を min-width: 100% に設定すると、問題が修正されます。
.wrap div の幅は 1050px に固定されているため、ページの最小幅も 1050px に強制されます。これが、ブラウザ ウィンドウの幅が 1050px 未満の場合にスクロールバーが表示される理由です。
.wrap {
position: relative;
margin: 0 auto;
width: 1050px;
}
margin:0 auto;
ただし、コンテンツを中央に配置するために固定幅の div が必要なため、この幅が固定されているのには理由があります。
より狭い画面に合わせてデザインを縮小したい場合は、CSS メディア クエリを使用して、さまざまなブラウザー/デバイス幅用の代替ルールを作成することを検討することをお勧めします。
このデモのサイズを変更して、意図したとおりに動作するかどうかを確認してください。そうであれば、チュートリアルを実行してください。
Smashing Magazineには、特にモバイル デバイス用の別のレイアウトを探している場合に役立つ、優れたメディア クエリのチュートリアルもあります。