max-width: ***; min-width: ***;
div {
max-width: 500px;
min-width: 300px;
}
max-width の初期値は none(制限なし)です。
IEでは、表示モードが「標準モード」の場合のみ機能するようです。(IE 6以下では未対応)
以下の使用例では、最大幅を 600px、最小幅を 500px に指定しています。この場合、通常の幅は600pxですが、ブラウザの幅を600pxより狭くすると、それに合わせてボックスの幅も狭くなります。更にブラウザの幅を狭くしていくと、500pxより狭くなった時点で横スクロールが入ります。
使用例
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>
<style type="text/css">
div {
max-width: 600px;
min-width: 500px;
background-color: #85b9e9;
}
</style>
</head>
<body>
<div>最小幅 500px 〜 最大幅 600px</div>
</body>
</html>
表示例
- サイト内検索