【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%」は使いにくいため、下記を参考に高さをいっぱいにしましょう。
CSSやhtmlの基本をしっかり理解すると、この記事の内容もより理解できるようになりますよ。
↓CSSやhtmlを楽しく学べるようにマンガを描きましたのでゼヒご覧ください↓
↑「副業してもう少し稼ぎたい！」というかたのために副業の方法も解説しています。
height:autoが効かない理由
height:autoとwidth:autoは違うから
ブロック要素のwidth:autoは横幅いっぱいになりますよね。
その考えで行くとheight:autoも縦幅いっぱいになりそうなものですが、実際は内容の高さに応じて最小の高さになります。
よってheight:autoでは高さがいっぱいになりません。
heightの高さが0になる理由
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指定の場合
<div class="example" style="height:175px;">
<div>position:absolute</div>
</div>imgを置いた場合
<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を指定した要素は浮くため、これを指定した要素はそこにないものとなり、これ以外の要素がないとき、そこには何もなくなります。
（↑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>下記のように指定することで高さが0でなくなります。
また、後の要素に悪影響を及ぼすためfloatを使うときは必ず下記のいずれかを指定しましょう。
親要素にoverflow:hidden
<div style="overflow: hidden" class="example2">
<div>float:left</div>
</div>弟要素にclear:both
<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に限定しています。
<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が効かない理由
- height:100%が効かないのは、親がheight:autoなら子のheight:○%は効かないから
- height:autoが効かないのはwidth:autoと違い、height:autoは内容の高さに応じて最小の高さになるから
- heightの高さが0になるのはposition:absoluteかfloatを使っているから
- その他の原因としてmax-heightからmin-heightの範囲を超えているから
以上、height:100%やautoが効かなかったり、高さが0になる理由でした。
「この記事の内容がよくわからなかった…」「なんかうまくいかなかった…」というかたは下記記事↓でhtmlとCSSの基本を学びましょう。
わからないまま突き進むより基本を学ぶのが結局近道です。
