百分比設定的標籤高度問題
儘管將高度設定為 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中文網其他相關文章!