CSSのmax-heightプロパティは、要素の高さの最大値を設定するために使用されます。高さを制限することで、レイアウトを崩さずにコンテンツを表示することができます。
INDEX
max-heightプロパティの値とその効果の一覧
100px– 要素の高さが最大100pxに制限されます。200px– 要素の高さが最大200pxに制限されます。none– 制限なしで、要素はコンテンツに応じて伸縮します。
注意点や関連情報
max-heightは、コンテンツが溢れた場合でも高さを制限するために使用します。overflowプロパティと一緒に使用すると、コンテンツが溢れた際の挙動を制御できます。また、縦方向の高さ制限に加え、max-widthと組み合わせてレイアウト全体を管理することも可能です。
max-heightが効かない時の原因と対策
親要素がoverflow: hiddenまたはoverflow: autoを使用している
親要素にoverflow: hiddenやoverflow: autoが指定されている場合、子要素のmax-heightが正しく機能しないことがあります。これにより、要素の高さが意図した通りに制限されない場合があります。
対策: 親要素のoverflowプロパティを確認し、必要に応じて調整します。または、max-heightの設定を再検討します。
要素がフロートしている
要素がfloatされている場合、親要素にクリアリングが行われていないと、max-heightが効かないことがあります。
対策: 親要素にclearfixを適用するか、floatの使用を再検討します。
共通するCSSコード
.css-sample-container {
width: 100%;
margin: 20px 0;
}
.css-sample-item {
background-color: #f0f8ff;
padding: 10px;
margin: 10px auto;
border: 1px solid #000;
overflow: auto;
}
max-height: 100px;
要素の高さが最大100pxに制限されます。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-item css-sample-max-height-100px">
この要素にはmax-heightが100pxに設定されています。テキストが長い場合は高さが100pxを超えません。
この要素にはmax-heightが100pxに設定されています。テキストが長い場合は高さが100pxを超えません。
この要素にはmax-heightが100pxに設定されています。テキストが長い場合は高さが100pxを超えません。
この要素にはmax-heightが100pxに設定されています。テキストが長い場合は高さが100pxを超えません。
この要素にはmax-heightが100pxに設定されています。テキストが長い場合は高さが100pxを超えません。
この要素にはmax-heightが100pxに設定されています。テキストが長い場合は高さが100pxを超えません。
この要素にはmax-heightが100pxに設定されています。テキストが長い場合は高さが100pxを超えません。
この要素にはmax-heightが100pxに設定されています。テキストが長い場合は高さが100pxを超えません。
この要素にはmax-heightが100pxに設定されています。テキストが長い場合は高さが100pxを超えません。
この要素にはmax-heightが100pxに設定されています。テキストが長い場合は高さが100pxを超えません。
この要素にはmax-heightが100pxに設定されています。テキストが長い場合は高さが100pxを超えません。
</div>
</div>
CSSコード
.css-sample-max-height-100px {
max-height: 100px;
}
表示結果
この要素にはmax-heightが100pxに設定されています。テキストが長い場合は高さが100pxを超えません。 この要素にはmax-heightが100pxに設定されています。テキストが長い場合は高さが100pxを超えません。 この要素にはmax-heightが100pxに設定されています。テキストが長い場合は高さが100pxを超えません。 この要素にはmax-heightが100pxに設定されています。テキストが長い場合は高さが100pxを超えません。 この要素にはmax-heightが100pxに設定されています。テキストが長い場合は高さが100pxを超えません。 この要素にはmax-heightが100pxに設定されています。テキストが長い場合は高さが100pxを超えません。 この要素にはmax-heightが100pxに設定されています。テキストが長い場合は高さが100pxを超えません。 この要素にはmax-heightが100pxに設定されています。テキストが長い場合は高さが100pxを超えません。 この要素にはmax-heightが100pxに設定されています。テキストが長い場合は高さが100pxを超えません。 この要素にはmax-heightが100pxに設定されています。テキストが長い場合は高さが100pxを超えません。 この要素にはmax-heightが100pxに設定されています。テキストが長い場合は高さが100pxを超えません。 この要素にはmax-heightが100pxに設定されています。テキストが長い場合は高さが100pxを超えません。 この要素にはmax-heightが100pxに設定されています。テキストが長い場合は高さが100pxを超えません。
max-height: 200px;
要素の高さが最大200pxに制限されます。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-item css-sample-max-height-200px">
この要素にはmax-heightが200pxに設定されています。より高い値で設定されています。
この要素にはmax-heightが200pxに設定されています。より高い値で設定されています。
この要素にはmax-heightが200pxに設定されています。より高い値で設定されています。
この要素にはmax-heightが200pxに設定されています。より高い値で設定されています。
この要素にはmax-heightが200pxに設定されています。より高い値で設定されています。
この要素にはmax-heightが200pxに設定されています。より高い値で設定されています。
この要素にはmax-heightが200pxに設定されています。より高い値で設定されています。
この要素にはmax-heightが200pxに設定されています。より高い値で設定されています。
この要素にはmax-heightが200pxに設定されています。より高い値で設定されています。
この要素にはmax-heightが200pxに設定されています。より高い値で設定されています。
この要素にはmax-heightが200pxに設定されています。より高い値で設定されています。
この要素にはmax-heightが200pxに設定されています。より高い値で設定されています。
この要素にはmax-heightが200pxに設定されています。より高い値で設定されています。
この要素にはmax-heightが200pxに設定されています。より高い値で設定されています。
</div>
</div>
CSSコード
.css-sample-max-height-200px {
max-height: 200px;
}
表示結果
この要素にはmax-heightが200pxに設定されています。より高い値で設定されています。 この要素にはmax-heightが200pxに設定されています。より高い値で設定されています。 この要素にはmax-heightが200pxに設定されています。より高い値で設定されています。 この要素にはmax-heightが200pxに設定されています。より高い値で設定されています。 この要素にはmax-heightが200pxに設定されています。より高い値で設定されています。 この要素にはmax-heightが200pxに設定されています。より高い値で設定されています。 この要素にはmax-heightが200pxに設定されています。より高い値で設定されています。 この要素にはmax-heightが200pxに設定されています。より高い値で設定されています。 この要素にはmax-heightが200pxに設定されています。より高い値で設定されています。 この要素にはmax-heightが200pxに設定されています。より高い値で設定されています。 この要素にはmax-heightが200pxに設定されています。より高い値で設定されています。 この要素にはmax-heightが200pxに設定されています。より高い値で設定されています。 この要素にはmax-heightが200pxに設定されています。より高い値で設定されています。
max-height: none;
制限がなく、要素の高さはコンテンツに応じて自動的に伸縮します。
HTMLコード
<div class="css-sample-container">
<div class="css-sample-item css-sample-max-height-none">
この要素にはmax-heightが設定されていません。コンテンツに応じて自動的に高さが変わります。
この要素にはmax-heightが設定されていません。コンテンツに応じて自動的に高さが変わります。
この要素にはmax-heightが設定されていません。コンテンツに応じて自動的に高さが変わります。
この要素にはmax-heightが設定されていません。コンテンツに応じて自動的に高さが変わります。
この要素にはmax-heightが設定されていません。コンテンツに応じて自動的に高さが変わります。
この要素にはmax-heightが設定されていません。コンテンツに応じて自動的に高さが変わります。
この要素にはmax-heightが設定されていません。コンテンツに応じて自動的に高さが変わります。
この要素にはmax-heightが設定されていません。コンテンツに応じて自動的に高さが変わります。
この要素にはmax-heightが設定されていません。コンテンツに応じて自動的に高さが変わります。
この要素にはmax-heightが設定されていません。コンテンツに応じて自動的に高さが変わります。
この要素にはmax-heightが設定されていません。コンテンツに応じて自動的に高さが変わります。
この要素にはmax-heightが設定されていません。コンテンツに応じて自動的に高さが変わります。
この要素にはmax-heightが設定されていません。コンテンツに応じて自動的に高さが変わります。
</div>
</div>
CSSコード
.css-sample-max-height-none {
max-height: none;
}
表示結果
この要素にはmax-heightが設定されていません。コンテンツに応じて自動的に高さが変わります。 この要素にはmax-heightが設定されていません。コンテンツに応じて自動的に高さが変わります。 この要素にはmax-heightが設定されていません。コンテンツに応じて自動的に高さが変わります。 この要素にはmax-heightが設定されていません。コンテンツに応じて自動的に高さが変わります。 この要素にはmax-heightが設定されていません。コンテンツに応じて自動的に高さが変わります。 この要素にはmax-heightが設定されていません。コンテンツに応じて自動的に高さが変わります。 この要素にはmax-heightが設定されていません。コンテンツに応じて自動的に高さが変わります。 この要素にはmax-heightが設定されていません。コンテンツに応じて自動的に高さが変わります。 この要素にはmax-heightが設定されていません。コンテンツに応じて自動的に高さが変わります。 この要素にはmax-heightが設定されていません。コンテンツに応じて自動的に高さが変わります。 この要素にはmax-heightが設定されていません。コンテンツに応じて自動的に高さが変わります。 この要素にはmax-heightが設定されていません。コンテンツに応じて自動的に高さが変わります。
まとめ
max-heightプロパティは、要素の縦方向の最大高さを制限します。- 指定された高さを超えると、要素は指定された値までしか伸びません。
noneを指定すると制限がなく、要素はコンテンツに応じて自動的に伸縮します。