CSSの高さプロパティ
例
2つの<div>要素の高さを設定します。
div.a {
height: auto;
border:
1px solid black;
}
div.b {
height: 50px;
border: 1px solid black;
}
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
height
プロパティは、要素の高さを設定します。
要素の高さには、パディング、境界線、またはマージンは含まれません。
height: auto;
要素が自動的に高さを調整して、コンテンツが正しく表示されるようにする場合。
が数値(ピクセル、(r)em、パーセンテージなど)に設定されている場合height
、コンテンツが指定された高さに収まらないと、オーバーフローします。コンテナがオーバーフローコンテンツを処理する方法は、
overflowプロパティによって定義されます。
注: min - heightプロパティと
max-heightプロパティは、プロパティをオーバーライドし
height
ます。
デフォルト値: | 自動 |
---|---|
遺伝性の: | いいえ |
アニメート可能: | はい。アニメート可能について読む |
バージョン: | CSS1 |
JavaScript構文: | object .style.height = "500px" |
ブラウザのサポート
表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。
Property | |||||
---|---|---|---|---|---|
height | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
CSS構文
height: auto|length|initial|inherit;
プロパティ値
Value | Description | Play it |
---|---|---|
auto | The browser calculates the height. This is default | |
length | Defines the height in px, cm, etc. Read about length units | |
% | Defines the height in percent of the containing block | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
その他の例
例
要素の高さを親要素の高さの50%に設定します。
#parent {
height: 100px;
}
#child {
height: 50%;
}
関連ページ
CSSチュートリアル:CSSの高さと幅
CSSチュートリアル:CSSボックスモデル
CSSリファレンス:widthプロパティ
HTML DOMリファレンス:heightプロパティ