max-height: ***; min-height: ***;
- ブラウザ
- 特性
- max-height
- min-height
max-height は最大の高さを、min-height は最小の高さを指定するプロパティです。
このプロパティを使用することで、ボックスの高さを特定の範囲内に収めることができます。
div {
max-height: 400px;
min-height: 300px;
}
| プロパティ名 | 値 | 説明 |
|---|---|---|
| max-height | 数値+単位（px 等）またはパーセント | 最大の高さを指定 （初期値は none） |
| min-height | 数値+単位（px 等）またはパーセント | 最小の高さを指定 （初期値は 0） |
max-height の初期値は none（制限なし）、min-height の初期値は 0 です。
IEでは、表示モードが「標準モード」の場合のみ機能するようです。（IE 6以下では未対応）
以下の使用例では、最大の高さを 500px、最小の高さを 400px に指定しています。この場合、通常の高さは500pxですが、ブラウザの高さを500pxより狭くすると、それに合わせてボックスの高さも狭くなります。更にブラウザの高さを狭くしていくと、400pxより狭くなった時点でスクロールが入ります。
使用例
<!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">
html, body {
height: 100%;
}
div {
height: 100%;
max-height: 500px;
min-height: 400px;
background-color: #bde9ba;
}
</style>
</head>
<body>
<div>最小の高さ 400px 〜 最大の高さ 500px</div>
</body>
</html>
表示例
- サイト内検索
