BinaryDevelop
  1. ホーム
  2. css

[解決済み】CSS - なぜ高さの割合が機能しないのですか？[重複している］

2022-04-03 16:54:24

質問

のパーセンテージ値はどうして？ 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-working は 0 になってしまいます。

どのように解決するのですか？

ブロック要素の高さは、デフォルトでブロックのコンテンツの高さになります。つまり、次のようなものが与えられる。 

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

#inner は、段落を含むのに十分な高さに成長し #outer を含む高さに成長します。 #inner .

heightやwidthをパーセントで指定する場合、それは要素の親を基準としたパーセントです。幅の場合、すべてのブロック要素は、特に指定がない限り、親からずっと <html> つまり、ブロック要素の幅はその内容とは無関係であり、次のように言います。 width: 50% は、明確に定義されたピクセル数で出力されます。

ただし、ブロック要素の高さ は、そのコンテンツに依存します。 特定の高さを指定しない限り そのため、高さに関する親子間のフィードバックがあり、次のように言います。 height: 50% は、親要素に特定の高さを与えてフィードバックのループを断ち切らない限り、明確に定義された値を得ることはできません。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します