ホームページ > 記事 > ウェブフロントエンド > 「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 サイトの他の関連記事を参照してください。