こんにちは tanaka です。
height=auto と height=100%
どう違うのかな、
そう思ったことはありませんか？
height=autoは、
親要素で使います。
中身に合わせて
自動で伸び縮みします。
height=100%は、
子要素で使います。
親要素の高さをを100％として
子要素の高さを％で決められます。
| 使用 場所 | 指定 | 説明 |
|---|---|---|
| 親要素 | auto | 中身に合わせて 親要素が伸び縮み |
| 子要素 | 100% | 親要素の高さを100％として 子要素の高さを％決められる |
それでは
詳しくみていきましょう。
＜コピーペーストについて＞
コードをコピーする際は
灰色で四角く囲まれた所を使用してください。
<i class="fas fa-check-circle"></i>説明
autoと100%の違いは、使用場所と目的の違い
height=auto と height=100%
の違いは、使用場所と目的の違いです。
| 使用場所 | 目的 | |
|---|---|---|
| auto | 親要素 | 中身に合わせて 親要素が伸び縮み |
| | | |
| 100% | 子要素 | 親要素の高さを100％として 子要素の高さを％決められる |
height=auto
height=autoは、
中に含まれる高さを
自動で合計し、
高さを算出してくれます。
中に含まれる高さには
・自らに入れられた文字、画像など
・子要素
があります。
height=100%（％指定）
height=100%は、
親要素の高さを100％として
子要素の高さを％で
決めることができます。
親要素の高さを０にした場合、
子要素で、
何を入れても０になり
表示が崩れます。
親要素にheight=autoを入れ
子要素を％指定にすると
親要素 ＝ 子要素を参照
子要素 ＝ 親要素を参照
このように
矛盾を起こすため、
自動で
親要素、子要素どちらも
height=autoになります。
具体例
height=auto
autoは、中身を自動で計算して、
高さを決めてくれます。
height=100%（％指定）
単体
親要素を100％として
子要素を％指定できます。
複数
％で指定できるため、
数値を細かく計算する必要がありません。
親＝auto、子＝％ 自動でどちらもauto
親要素にheight=autoを入れ
子要素を％指定にすると
親要素 ＝ 子要素を参照
子要素 ＝ 親要素を参照
このように
矛盾を起こすため、
自動で
親要素、子要素どちらも
height=autoになります。
まとめ
height=auto と height=100%
の違いは、使用場所と目的の違いです。
| 使用場所 | 目的 | |
|---|---|---|
| auto | 親要素 | 中身に合わせて 親要素が伸び縮み |
| | | |
| 100% | 子要素 | 親要素の高さを100％として 子要素の高さを％決められる |
親要素にheight=autoを入れ
子要素を％指定にすると
親要素 ＝ 子要素を参照
子要素 ＝ 親要素を参照
このように
矛盾を起こすため、
自動で
親要素、子要素どちらも
height=autoになる。
| auto 100% | 親要素 子要素 | 同時指定した場合は、 親子どちらもautoになる （子要素％指定がautoに切り替わる） |
以上、
height=autoとheight=100%
の違い（html,css）
の話でした。
ありがとうございました。