height
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
* Some parts of this feature may have varying levels of support.
height は CSS のプロパティで、要素の高さを指定します。既定では、このプロパティはコンテンツ領域の高さを定義します。box-sizing が border-box に設定されていた場合は、 境界領域の高さを定義します。
試してみましょう
height: 150px; height: 6em; height: 75%; height: auto; <section class="default-example" id="default-example"> <div class="transition-all" id="example-element"> This is a box where you can change the height. </div> </section> #example-element { display: flex; flex-direction: column; background-color: #5b6dcd; justify-content: center; color: #ffffff; } min-height および max-height プロパティは height を上書きします。
メモ: 幾何プロパティとして、 height プロパティは、<svg>、<rect>、<image>、<foreignObject> の各 SVG 要素にも適用されます。 auto は 0 に、パーセント値は <rect> の場合は SVG ビューポートの高さに対する相対値に解決します。 CSS の height プロパティ値は、 SVG 要素に設定された height 属性値を上書きします。
構文
/* <length> 値 */ height: 120px; height: 10em; height: 100vh; height: anchor-size(height); height: anchor-size(--myAnchor self-block, 250px); height: clamp(200px, anchor-size(width)); /* <percentage> 値 */ height: 75%; /* キーワード値 */ height: max-content; height: min-content; height: fit-content; height: fit-content(20em); height: auto; height: minmax(min-content, anchor-size(width)); height: stretch; /* グローバル値 */ height: inherit; height: initial; height: revert; height: revert-layer; height: unset; 値
<length>-
絶対値で高さを定義します。
<percentage>-
包含ブロックの高さのパーセント値で高さを定義します。
auto-
指定された要素の高さをブラウザーが計算して決めます。
max-content-
本来の望ましい高さです。
min-content-
本来の最小の高さです。
fit-content-
利用できる空間を使用しますが、 max-content を超えないようにします。すなわち、
min(max-content, max(min-content, stretch))です。 fit-content(<length-percentage>)-
利用可能な空間に対して fit-content 式を使用し、指定された引数に置き換えられます。すなわち
min(max-content, max(min-content, <length-percentage>))です。 stretch-
要素のマージンボックスの高さを、包含ブロックの高さに設定します。マージンボックスが包含ブロック内で利用できる空間をすべて満たそうとするため、 100% と似たような動作をしますが、結果として得られるサイズは box-sizing で決定されるボックスではなく、マージンボックスに適用されます。
メモ: ブラウザーが
stretch値のために使用する別名と実装状況については、ブラウザーの互換性の節を参照してください。
アクセシビリティ
要素の height は、テキストを大きくするためにページを拡大したとき、切り捨てたられたり他のコンテンツを邪魔したりしないように設定するよう確認してください。
公式定義
形式文法
height =
auto |
<length-percentage [0,∞]> |
min-content |
max-content |
fit-content( <length-percentage [0,∞]> ) |
<calc-size()> |
<anchor-size()> |
stretch |
fit-content |
contain
<length-percentage> =
<length> |
<percentage>
<calc-size()> =
calc-size( <calc-size-basis> , <calc-sum> )
<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )
<calc-size-basis> =
<size-keyword> |
<calc-size()> |
any |
<calc-sum>
<calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]*
<anchor-name> =
<dashed-ident>
<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline
<calc-product> =
<calc-value> [ [ '*' | / ] <calc-value> ]*
<calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-keyword> |
( <calc-sum> )
<calc-keyword> =
e |
pi |
infinity |
-infinity |
NaN
例
ピクセル数とパーセント値を使用して高さを設定
HTML
<div id="taller">これは 50 ピクセルの高さです。</div> <div id="shorter">これは 25 ピクセルの高さです。</div> <div id="parent"> <div id="child">これは親の半分の高さです。</div> </div> CSS
div { width: 250px; margin-bottom: 5px; border: 2px solid blue; } #taller { height: 50px; } #shorter { height: 25px; } #parent { height: 100px; } #child { height: 50%; width: 75%; } 結果
仕様書
| Specification |
|---|
| CSS Box Sizing Module Level 3 # preferred-size-properties |
| CSS Box Sizing Module Level 4 # sizing-values |