「height: 100%;」を設定すると、ラベル要素が高さ全体を満たさないのはなぜですか?

パーセント設定によるラベルの高さの問題

高さを 100% に設定しても、ラベル要素は影響を受けません。これは、高さ: 100% であるためです。参照点、通常は親要素の高さに依存します。

提供されたコード スニペットでは、.field ラベルの高さは 100% です。プロパティではありますが、親要素である .field では高さの値が指定されていません。その結果、ブラウザには 100% を計算するための定義された高さがありません。

これに対処するには、.field 親要素の高さの値を設定します。たとえば、height: 200px; を使用して固定の高さを割り当てることができます。または、height: 50vh; を使用して、含まれる要素に基づく高さのパーセンテージを指定します。 (vh はビューポートの高さを表します)。

修正コード:

<code class="css">.field {
    display: block;
    margin-bottom: 9px;
    background: none;
    border: none;
    height: 200px; /* Fixed height for reference */
}

.field label {
    color: #3E3E3E;
    font-weight: bold;
    width: 80px;
    display: block;
    float: left;
    margin-top: 5px;
    margin-left: 3px;
    height: 100%; /* Now it has a reference, 200px */
}</code>

親要素に高さコンテキストを提供すると、ラベルの 100% の高さ設定がかかります。この効果により、.field コンテナ内でラベルが完全に展開されます。

以上が「height: 100%;」を設定すると、ラベル要素が高さ全体を満たさないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。