ラベル要素で「height: 100%;」が機能しないのはなぜですか?

ラベルの高さ: 100% の設定が機能しません

ラベル要素の高さをその親と揃えようとしましたが、高さ: 100%;が実装されました。ただし、意図した効果は実現せず、ラベルは任意の高さのままになりました。

問題の理解

高さを 100% に設定する場合は、次の点を考慮することが重要です。基準点。この場合、サイズ変更コンテキストを確立するには、親要素の高さを明示的に定義する必要があります。このコンテキストがなければ、ブラウザは高さの 100% を計算する根拠がありません。

解決方法

この問題に対処するには、ラベルの親要素が高さが指定されています。これは、CSS を介して、または HTML マークアップで height 属性を設定することによって実現できます。

サンプル コード

<code class="css">.parent-element {
  height: 200px;
}

.field label {
  height: 100%;
}</code>

親要素の高さを 200px に設定することにより、 、ラベル要素は利用可能な垂直方向のスペースの 100% を正しく占有するようになります。

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