CSS height 高さを指定するサンプル

CSSのheightプロパティで、高さを指定するサンプルです。

目次

仕様 heightプロパティの仕様
サンプル 数値+pxを指定
  数値+%を指定
  autoを指定

heightプロパティの仕様

height : 値

heightプロパティは、高さを指定します。

説明
数値 + 単位   指定した単位で設定します。 
数値 + % 親ブロックに対する割合で設定します。
auto ブラウザが自動的に調整します。(初期値)
値を継承しない

初期値は、autoです。
以下はMDNのheightプロパティのリンクです。 https://developer.mozilla.org/ja/docs/Web/CSS/height

数値+pxを指定

heightに数値+pxを指定するサンプルです。

<style>
#box1{
	height:50px;/* pxで指定 */
}
#box{width:300px;height:200px;border:1px dotted #000;}
#box div{background:LightCyan;}
</style>
<div id="box">
	<div id="box1">box:<br /> height:50px</div>
</div>

3行目は、heightに50pxを指定しています。

以下のイメージになります。

数値+%を指定

heightに数値+%を指定するサンプルです。

<style>
#box1{
	height:50%;/* %で指定 */
}
#box{width:300px;height:200px;border:1px dotted #000;}
#box div{background:LightCyan;}
</style>
<div id="box">
	<div id="box1">box:<br /> height:50%</div>
</div>

3行目は、heightに50%を指定しています。
親のブロックに対する割合になります。
親は、5行目でheightに200pxを指定しているので、その50%の100pxになります。

以下のイメージになります。

autoを指定

heightにautoを指定するサンプルです。

<style>
#box1{
	height:auto;/* autoで指定 */
}
#box{width:300px;height:200px;border:1px dotted #000;}
#box div{background:LightCyan;}
</style>
<div id="box">
	<div id="box1">box:<br /> height:auto</div>
</div>

3行目は、heightにautoを指定しています。
高さは、ブラウザが自動で指定します。
確認した環境では、48pxでした。

以下のイメージになります。

関連の記事

CSS width 幅を指定するサンプル
CSS 最大の幅を指定するサンプル(max-width)
CSS 最小の幅を指定するサンプル(min-width)

△上に戻る