ここの私のページは、何らかの理由でレイアウトが壊れています-#main-content divは、ページ全体で右側のナビゲーション(348pxに固定されています)まで拡張する必要があります。
理由はよくわかりません。誰かがコードインスペクターを見てくれたら、それは素晴らしいことです。CSSとhtml plsが必要な場合は、私に知らせてください。
どうもありがとう..
max-width
から属性を削除し、ラッパーのを98.6%にcontent-wrapper
設定します(マージンを考慮)width
予想よりも短い他の要素がある場合は、他のラップされたdiv/要素のいくつかに対してこれを繰り返す必要があることに注意してください。
私はChromeでこのソリューションをテストしましたが、それは完全に機能します-意図したとおりに動作します
編集:
max-widthが機能しない理由の詳細な説明:
max-width
およびプロパティはmin-width
、流体要素と静的サイズの要素の間の中間体と考えることができます。幅が指定されていないが最小幅が指定されている要素は、デフォルトの幅または最小幅(2つのうち低い方)のいずれかでサイズ設定されます。同様に、幅が指定されていないが最大幅が指定されている要素は、自動幅に設定されますが、最大幅を超えない範囲でのみ拡張されます。
最小幅と最大幅は、定義された幅でも使用できます。たとえば、幅を設定した要素があり、width: 70%;
その幅がたとえば300ピクセルを超えないようにする場合はmax-width: 300px;
、要素を設定して300ピクセルを超えないようにすることができますが、300ピクセルよりも小さい場合があります。コンテナのサイズ(これはパーセンテージが参照するものです。つまり、幅がパーセンテージに設定されている場合、それは含まれている要素の幅のそのパーセンテージになります)。
実際のシナリオ-これらは、私が見た最小幅と最大幅の最も一般的な使用法の2つです。
min-width
-状況:流動的なレイアウト(ウィンドウのサイズを変更すると幅が広く/狭くなる)と常に読みやすくしたいコンテンツセクションを持つWebページを作成しています。最小幅を設定して、スクロールバーが表示され、セクションが縮小しなくなった後、セクションのサイズが最小になるようにすることができます。私はmin-width
この目的のために新しいホームページに実装しました(ここを参照してください-ウィンドウのサイズを調整してウィンドウをどんどん狭くし、メインコンテンツ[ <div id="mainContentBack">
]セクションの幅がわずか600pxに減少したときに何が起こるかを見てください-そのdivを持つように設定されていますmin-width: 600px;
)。
max-width
-これらのプロパティを説明するときに説明したシナリオは、実際に私が見た中で最も一般的なものです。ただし、2番目に一般的なのは、開発者がページ上にサイズ変更可能なテキストエリア(場合によってはセクション全体)を作成することを選択した場合です(ユーザーはクリックしてドラッグしてサイズを変更できます)。ユーザーが要素を指定された幅より広くできないように、最大幅を設定します。