min-height

by 2 contributors:

概要

CSS の min-height プロパティは要素の最小の高さを設定するのに使われます。height プロパティの使用値は、min-height に指定した値よりも小さくなりません。

min-height の値は max-heightheight の両方を上書きします。

  • 初期値 0
  • 適用対象 非置換インライン要素、テーブルの列、列グループを除く全要素
  • 継承 しない
  • 相対値の基準 パーセンテージは、生成ボックスの包含ブロックの高さを基準に計算されます。 包含ブロックの高さが明示的に定義されず(この場合コンテンツの高さに依存します)この要素が絶対位置指定されていないなら、パーセンテージ値は 0 として扱われます。
  • メディア visual
  • 計算値 指定どおりのパーセンテージまたは絶対的な長さ
  • アニメーションの可否 可能。長さ、パーセンテージ、calc() として可能。どちらも長さなら長さとして補間。どちらもパーセンテージならパーセンテージとして補間。それ以外では、両方の値は 長さとパーセンテージの合計(各値はゼロかもしれません)を計算する calc() 関数に変換されます。これらの calc() 関数は、それぞれ補間結果を実数として持っています。

構文

形式文法: <length> | <percentage> | max-content | min-content | fit-content | fill-available
min-height: 3.5em
min-height: 10%
min-height: max-content
min-height: min-content
min-height: fit-content
min-height: fill-available

min-height: inherit

<length>
固定した、高さの最小値です。利用可能な単位については <length> をご覧ください。負の値は宣言を無効にします。
<percentage>
包含ブロックの高さに対する <割合> で表現された、固定した高さの最小値です。負の値は宣言を無効にします。
max-content
コンテンツにあわせた最適な高さ(The intrinsic preferred height)
min-content
コンテンツにあわせた最小の高さ(The intrinsic minimum height)
fill-available
包含ブロックの高さから水平方向のマージン、ボーダー、パディングを引いたもの。一部ブラウザで、このキーワードに古い名前、available を与えています
fit-content
CSS3 Box では、これは min-content の同義語です。CSS3 Sizing ではもっと複雑なアルゴリズムを定義していますが、実験的な方法を含めても、実装しているブラウザはありません。

table { min-height: 75%; }

form { min-height: 0; }

仕様

仕様書 策定状況 コメント
CSS Intrinsic & Extrinsic Sizing Module Level 3 草案 キーワード max-contentmin-contentfit-contentfill-available を追加。これは、 CSS3 Box と CSS3 Writing Modes の草案の両方にあった定義に代わる定義です。
CSS Flexible Box Layout Module 勧告候補 この仕様の 旧バージョンで auto キーワードを追加し初期値として使いました。しかし、CSSWG はその後、この変更を元に戻すことを決めました。2013 年 の 3 月 29 日現在、最新の Editor's Draft では min-width プロパティにもう変更はありません(すなわち、auto 値は導入されませんでした)
CSS Transitions 草案 min-height をアニメーション可能として定義
CSS Level 2 (Revision 1) 勧告 初回定義

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 1.0 3.0 (1.9) 7.0 4.0 1.0
2.0.2 (416) for positioned elements
<table> への適用[1] 未サポート (有) 未サポート (有) 未サポート
max-contentmin-contentfit-contentfill-available 未サポート 未サポート 未サポート 未サポート 未サポート
auto 廃止 Gecko 22 21.0 16.0 (16.0) 未サポート 12.10 未サポート
auto を初期値に 廃止 Gecko 22 21.0 18.0 (18.0) 未サポート 12.10 未サポート
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート ? ? ? ? ?

注記

[1] CSS 2.1 は明示的に <table> での min-height の挙動を未定義のままにしています。したがってどのような挙動も CSS2.1 対応です。この挙動は新しい CSS 仕様で定義される可能性があるため、ウェブ開発者は現在の特定の挙動を信頼してはいけません。

関連情報

ドキュメントのタグと貢献者

タグ: 
Contributors to this page: ethertank, sosleepy
最終更新者: ethertank,
サイドバーを隠す