☰

CSS – パーセンテージの高さが機能しないのはなぜですか? [重複] 質問する

tag-icon • tag-icon css height width
CSS – パーセンテージの高さが機能しないのはなぜですか? [重複] 質問する

のパーセンテージ値はheight機能しないのに、 のパーセンテージ値はwidth機能するのはなぜですか?

例えば:

<div id="working"></div>
<div id="not-working"></div>

#working{
    width:80%;
    height:140px;
    background:orange;
}
#not-working{
    width:80%;
    height:30%;
    background:green;
}

の幅は#workingビューポートの 80% になりますが、 の高さは#not-working0 になります。

ベストアンサー1

ブロック要素の高さは、デフォルトでブロックのコンテンツの高さになります。つまり、次のような場合です。

<div id="outer">
    <div id="inner">
        <p>Where is pancakes house?</p>
    </div>
</div>

#innerは段落を収容できるほどの高さに成長し、#outerは を収容できるほどの高さに成長します#inner。

高さまたは幅をパーセンテージで指定する場合、それは要素の親に対するパーセンテージです。幅の場合、特に指定がない限り、すべてのブロック要素は、最大で親と同じ幅になります<html>。したがって、ブロック要素の幅はそのコンテンツとは独立しており、 はwidth: 50%明確に定義されたピクセル数を生成します。

ただし、特定の高さを指定しない限り、ブロック要素の高さはそのコンテンツによって決まりますheight: 50%。したがって、高さに関しては親と子の間でフィードバックがあり、親要素に特定の高さを指定してフィードバック ループを中断しない限り、明確に定義された値は生成されません。

おすすめ記事