height=autoとheight=100%の違い(html,css入門)

こんにちは 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%として
子要素の高さを%で
決めることができます。


親要素の高さを0にした場合、

子要素で、
何を入れても0になり
表示が崩れます。


親要素にheight=autoを入れ
子要素を%指定にすると

親要素 = 子要素を参照
子要素 = 親要素を参照

このように
矛盾を起こすため、

自動で
親要素、子要素どちらも
height=autoになります。

具体例

height=auto

autoは、中身を自動で計算して、
高さを決めてくれます。

画像blog-height-auto-anime01

height=100%(%指定)

単体

親要素を100%として
子要素を%指定できます。

画像blog-difference-of-height04

複数

%で指定できるため、
数値を細かく計算する必要がありません。

画像blog-difference-of-height05

親=auto、子=% 自動でどちらもauto

親要素にheight=autoを入れ
子要素を%指定にすると

親要素 = 子要素を参照
子要素 = 親要素を参照

このように
矛盾を起こすため、

自動で
親要素、子要素どちらも
height=autoになります。

画像blog-difference-of-height07

まとめ

autoと100%は、目的が違う

height=auto と height=100%
の違いは、使用場所と目的の違いです。

 使用場所目的
auto親要素中身に合わせて
親要素が伸び縮み

100%子要素親要素の高さを100%として
子要素の高さを%決められる
親要素auto、子要素%はダメ

親要素にheight=autoを入れ
子要素を%指定にすると

親要素 = 子要素を参照
子要素 = 親要素を参照

このように
矛盾を起こすため、

自動で
親要素、子要素どちらも
height=autoになる。

auto
100%
親要素
子要素
同時指定した場合は、
親子どちらもautoになる
(子要素%指定がautoに切り替わる)

以上、
height=autoとheight=100%
の違い(html,css)
の話でした。

ありがとうございました。

タイトルとURLをコピーしました