幅・高さ

「max-height」プロパティ

「max-height」プロパティは、要素の最大の高さを指定するCSSプロパティです。
枠線(境界線)やパディング領域の内側にある、「table」「td」「th」「img」「input」「textarea」「select」などのコンテンツ領域の高さを設定できます。
「max-height」プロパティは、要素がこれ以上は大きくならない最大値を指定することができます。

「max-height」プロパティの値

要素の最大の高さを指定する単位は「none」「px」「%」「em」「rem」「vw」「vh」などの値を指定することができます。
※ブラウザの種類により、小数点以下の数値は切り上げされる場合がありますので小数点での指定は推奨できません。
※要素には、インライン要素とブロックレベル要素があり、インライン要素では、高さの指定ができません。

「max-height」プロパティの指定方法

要素の最大の高さを指定する場合は、「max-height」プロパティを使い適応する値を指定することで実装できます。

「max-height」プロパティ
セレクタ{
max-height;要素の最大の高さ;
}
値例
/* 基本値 */
max-height: none;/* 初期値 */

/* px値 */
max-height: 100px;
max-height: 200px;
max-height: 300px;

/* %値 */
max-height: 80%;
max-height: 90%;
max-height: 100%;

/* em値 */
max-height: 20em;
max-height: 30em;
max-height: 40em;

/* rem値 */
max-height: 20rem;
max-height: 30rem;
max-height: 40rem;

/* vw値 */
max-height: 20vw;
max-height: 30vw;
max-height: 40vw;

/* vw値 */
max-height: 20vh;
max-height: 30vh;
max-height: 40vh;
表示例
要素の最大の高さ(10px)
要素の最大の高さ(20px)
要素の最大の高さ(1em)
要素の最大の高さ(2em)