ホームへ

【CSS】height:100%やautoが効かない理由

「height:100%やautoにしても高さいっぱいにならないのなんで!?」

「高さが0になってるのなんで!?」

heightは要素の高さを指定するCSSです。

少しクセがある上にwidthと比べて利用頻度が低いため使い慣れずワナに陥りがちです。

height:100%やautoが効かなかったり、高さが0になる理由を解説します。

height:100%が効かない理由

親がheight:autoなら子のheight:○%は効かないから

heightを%で指定した場合、親要素の高さを基準に高さが決まります。

親の高さが100pxのときにheight:100%を指定するとheight:100pxになるわけです。

ただし、親がheight:autoなら子のheightの%指定は効かないのです。

これは仕様です。

さらにheightの初期値はautoです。

height:autoを指定した覚えがなくても、デフォルトでheightの%指定が効かない状態になっているのです。

heightで%指定するには親要素にauto以外のheightを指定する必要があります。

「height:100%」は使いにくいため、下記を参考に高さをいっぱいにしましょう。

height:autoが効かない理由

height:autoとwidth:autoは違うから

ブロック要素のwidth:autoは横幅いっぱいになりますよね。

その考えで行くとheight:autoも縦幅いっぱいになりそうなものですが、実際は内容の高さに応じて最小の高さになります。

よってheight:autoでは高さがいっぱいになりません。

heightの高さが0になる理由

position:absoluteを使っているから

position:absoluteを使うと要素を浮かせて任意の位置に移動できます。

このときposition:absoluteを指定した要素はそこにないものとなり、これ以外の要素がないとき、そこには何もなくなります。

position:absolute

(↑padding分だけ残っています。)

<style>
.example{
    border: 1px solid #000;
    padding: 10px;
    background: #e8b064;
    position: relative;
}
.example>div{
    /*コレ*/position: absolute;
    border: 1px solid #000;
    padding: 10px;
    background: #91d8de;
}
</style>

<div class="example">
    <div>position:absolute</div>
</div>

height:autoは内容量に合わせて最小の高さになります。

内容がなくなれば高さもなくなり、height:0になるワケです。

【解決方法】heightを指定するか高さを維持できるモノを置く

兄弟要素に「position:absolute」が指定されていない要素を置くとその高さ分確保できます。

置く要素がない場合はheightを指定するといいでしょう。

height指定の場合

position:absolute
<div class="example" style="height:175px;">
    <div>position:absolute</div>
</div>

imgを置いた場合

position:absolute
<div class="example">
    <div>position:absolute</div>
    <img alt="" width="300" src="https://csshtml.work/wp-content/uploads/cat.jpg">
</div>

floatを使っているから

floatは要素を横並びにできるCSSです。

floatを指定した要素は浮くため、これを指定した要素はそこにないものとなり、これ以外の要素がないとき、そこには何もなくなります。

float:left

(↑padding分だけ残っています。)

<style>
.example2{
    border: 1px solid #000;
    padding: 10px;
    background: #e8b064;
}
.example2>div{
    /*コレ*/float: left;
    border: 1px solid #000;
    padding: 10px;
    background: #91d8de;
}
</style>

<div class="example2">
    <div>float:left</div>
</div>

【解決方法】親要素にoverflow:hiddenか、弟要素にclear:bothを指定する

下記のように指定することで高さが0でなくなります。

また、後の要素に悪影響を及ぼすためfloatを使うときは必ず下記のいずれかを指定しましょう。

親要素にoverflow:hidden

float:left
<div style="overflow: hidden" class="example2">
    <div>float:left</div>
</div>

弟要素にclear:both

float:left

<div class="example2">
    <div>float:left</div>
    <br style="clear:both">
</div>

なお、floatは崩れやすくメンドウであるため、display:flexで横並べすることをオススメします。

その他heightが効かない理由

max-heightからmin-heightの範囲を超えているから

max-heightは最大の高さを、min-heightは最小の高さを指定するCSSです。

heightはこの範囲を超えることはできません。

下記はmax-heightとmin-heightで高さを50px~100pxに限定しています。

height:1000px;
height:10px;
<style>
.example3{
    /*コレ*/max-height: 100px;
    /*コレ*/min-height: 50px;
    border: 1px solid #000;
    padding: 10px;
    background: #e8b064;
}
</style>

<div style="height: 1000px;" class="example3">height:1000px;</div>
<div style="height: 10px;" class="example3">height:10px;</div>

「height:1000px」と指定しても100pxを超えることはできませんし、「height:10px」でも50pxを下回ることはありません。

【解決方法】max-heightやmin-heightを再指定するか初期値にする

max-heightやmin-heightを設定する必要がある場合は任意の値を、設定しなくていい場合は初期値を指定してリセット、またはmax-heightやmin-heightの記述を削除しましょう。

初期値は下記のとおりです。値が違うので注意しましょう。

max-height: none
min-height: auto

【まとめ】heightが効かない理由

  1. height:100%が効かないのは、親がheight:autoなら子のheight:○%は効かないから
  2. height:autoが効かないのはwidth:autoと違い、height:autoは内容の高さに応じて最小の高さになるから
  3. heightの高さが0になるのはposition:absoluteかfloatを使っているから
  4. その他の原因としてmax-heightからmin-heightの範囲を超えているから

以上、height:100%やautoが効かなかったり、高さが0になる理由でした。

マンガで読める関連記事