こんにちは tanaka です。
height=auto と height=100%
どう違うのかな、
そう思ったことはありませんか?
height=autoは、
親要素で使います。
中身に合わせて
自動で伸び縮みします。
height=100%は、
子要素で使います。
親要素の高さをを100%として
子要素の高さを%で決められます。
使用 場所 | 指定 | 説明 |
---|---|---|
親要素 | auto | 中身に合わせて 親要素が伸び縮み |
子要素 | 100% | 親要素の高さを100%として 子要素の高さを%決められる |
それでは
詳しくみていきましょう。
<コピー、ペーストすると文字化けします>
このページのコードをコピー、ペーストすると
「ダブルクオーテーションなどの一部が文字化け」
して正常に機能しなくなります。
十分ご注意ください。
説明
autoと100%の違いは、使用場所と目的の違い
height=auto と height=100%
の違いは、使用場所と目的の違いです。
使用場所 | 目的 | |
---|---|---|
auto | 親要素 | 中身に合わせて 親要素が伸び縮み |
| | |
100% | 子要素 | 親要素の高さを100%として 子要素の高さを%決められる |
height=auto
height=autoは、
中に含まれる高さを
自動で合計し、
高さを算出してくれます。
中に含まれる高さには
・自らに入れられた文字、画像など
・子要素
があります。
height=100%(%指定)
height=100%は、
親要素の高さを100%として
子要素の高さを%で
決めることができます。
親要素の高さを0にした場合、
子要素で、
何を入れても0になり
表示が崩れます。
親要素に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)
の話でした。
ありがとうございました。