100%幅の流動的なレイアウトのWebページがあります。
ブラウザウィンドウのサイズを変更すると、ページ内の要素が重なります。
このウェブサイトに似た効果を作成します http://bologna.bakeca.it/ ウィンドウが固定幅より小さい場合、サイズ変更を停止します。
BodyタグのCSSのmin-widthプロパティを設定できます。このプロパティはIE6でサポートされていないため、次のように記述できます。
body{
min-width:1000px; /* Suppose you want minimum width of 1000px */
width: auto !important; /* Firefox will set width as auto */
width:1000px; /* As IE6 ignores !important it will set width as 1000px; */
}
または:
body{
min-width:1000px; // Suppose you want minimum width of 1000px
_width: expression( document.body.clientWidth > 1000 ? "1000px" : "auto" ); /* sets max-width for IE6 */
}
まあ、あなたはほとんど自分自身に答えを与えました。 CSSで、含む要素に最小幅を指定します。 IE6をサポートする必要がある場合は、min-width-trickを使用できます。
#container {
min-width:800px;
width: auto !important;
width:800px;
}
これにより、IE6および最新のブラウザーで800pxの最小幅が効果的に得られます。