如何將元素的高度設定為 100% 減去固定像素值？

基於百分比的高度減去像素以實現最佳元素大小

透過可重複使用的CSS 類別增強網站一致性並減少程式碼混亂是一項值得稱讚的努力。當處理含有液體的容器時，有必要確定如何設定特定元素的高度。本文討論了一個常見場景。

考慮一個帶有標題 div 和無序列表的容器 div。目標是將容器內的剩餘高度分配給列表，不包括標題的固定高度 18px。

為了實現這一點，CSS 提供了calc() 函數，它允許在樣式規則內進行動態計算：

height: calc(100% - 18px);

此表達式為列表分配的高度等於容器的100 %，不包括18px 標題height.

但是，一些較舊的瀏覽器可能不支援calc()函數。在這種情況下，請考慮使用特定於供應商的實作：

/* Firefox */
height: -moz-calc(100% - 18px);
/* WebKit */
height: -webkit-calc(100% - 18px);
/* Opera */
height: -o-calc(100% - 18px);
/* Standard */
height: calc(100% - 18px);

透過使用calc() 函數有效組合百分比和固定值，您可以微調元素大小、確保一致性並增強整體使用者體驗在您的網站上的體驗。

以上是如何將元素的高度設定為 100% 減去固定像素值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！