CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのmin-height（最小の高さ）プロパティの使い方と実例

CSSのmin-heightプロパティは、ボックス（要素）がそれより小さくなれない「最小の高さ」を指定するために使用します。このプロパティを使うことで、コンテンツの量に関わらず、要素が一定以上の高さを保つことができます。

min-heightで指定できる値

min-heightプロパティには、以下のような値を指定できます。

  • 数値＋単位：px、em、rem などの絶対・相対的な長さ（例：min-height:150px;）
  • パーセンテージ：親要素の高さに対する割合（例：min-height:50%;）
  • auto：初期値。最小の高さの制限を設けません

使用例

次の例では、幅400pxの段落に対して min-height:150px; を指定しています。テキストの量が少なくても、段落の高さは最低でも150px確保されます。

<html>
   <head>
   </head>
   <body>
      <p style = "width:400px; min-height:150px; border:1px solid blue; padding:5px; margin:10px;">
         This paragraph is 400px wide and min height is 150px
         This paragraph is 400px wide and min height is 150px
         This paragraph is 400px wide and min height is 150px
         This paragraph is 400px wide and min height is 150px
      </p>
      <img alt = "logo" src = "/css/images/logo.png" width = "100" height = "100" />
   </body>
</html>

heightとの違い

height プロパティで高さを固定すると、コンテンツがその高さを超えた場合にはみ出してしまう可能性があります。一方、min-height を使えば、コンテンツが増えたときに要素が自動的に伸びるため、レイアウトが崩れにくくなります。

  • height：高さを固定する（内容が多くても高さは変わらない）
  • min-height：最低限の高さを保証し、内容に応じて拡張される

同様に、最大の高さを制限したい場合は max-height プロパティを使用します。これらを組み合わせることで、柔軟でレスポンシブなレイアウトを実現できます。

  1. CSSで要素の幅と高さを指定する方法！height・widthプロパティの基本と実例

    CSSの height プロパティと width プロパティは、それぞれ要素の高さと幅を指定するために使用されます。また、max-height、max-width、min-height、min-width プロパティを使えば、これらのサイズに上限値や下限値を設定することも可能です。 基本構文 CSSの height および width プロパティの基本的な書き方は以下の通りです。 Selector {    height: /*値*/    width: /*値*/ } 要素の実際のサイズの計算方法 要素の実際の表示サイズは、width や height

  2. CSSのmin-heightプロパティとは？基本構文と実用的なサンプルコードで解説

    CSSのmin-heightプロパティを使うと、要素のコンテンツボックスに対して最小の高さを指定できます。このプロパティが設定された要素は、たとえheightの値がmin-heightより小さくても、コンテンツボックスがmin-heightよりも小さくなることはありません。 構文（シンタックス） CSS min-heightプロパティの基本的な書き方は以下のとおりです。 Selector { min-height: /*値*/ } サンプルコード1：ボタンクリックでmin-heightを設定する それでは、CSS min-heightプロパティの具体的な使用例を見てみましょう。次のコー