如何在 CSS 中將元素的高度或寬度設定為百分比減去固定像素值？

將寬度/高度設定為百分比減去像素

CSS 中的一個常見挑戰是將元素的高度或寬度指定為其容器減去固定值的百分比。考慮以下場景：

您有一個容器

高度未知且標題

在其中。在標題下方，您希望無序列表佔據剩餘空間，已知標題高度為 18px。如何動態指定清單的高度為「100% minus 18px」？

解

解在於利用calc() 函數：

height: calc(100% - 18px);

這個表達式透過減去已知的固定值（18px）來計算高度，允許列表擴展以填充列表中的剩餘空間

瀏覽器相容性

雖然calc() 得到廣泛支持，但某些舊版瀏覽器需要特定於供應商的版本：

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

為了實現完整的跨瀏覽器兼容性，請考慮使用所有版本以及最後的標準語法：

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

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