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

將容器高度設定為百分比減去固定值

為了保持整個網站的一致性並減少不必要的樣式，可重用的CSS 類別可能會很有用。但是，在標準化某些元素時您可能會遇到挑戰，例如將容器元素的高度設定為其父容器減去特定像素值的百分比。

您有一個容器

;帶有標題

;以及其中的無序列表 (

)。雖然標題的高度固定為 18 像素，但清單的高度應動態調整以填滿容器內的剩餘空間。當您需要將清單的高度指定為「100% - 18px」時，就會出現問題。

要實現此目的，您可以使用 calc() 函數：

height: calc(100% - 18px);

此函數可讓您可以在 CSS 中執行數學計算。在這種情況下，它會從 100% 中減去 18px 來確定清單的高度。

請注意，對於不支援 CSS3 calc() 函數的舊版瀏覽器，您可能需要實作特定於供應商的版本，如下所示嗯：

/* 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中文網其他相關文章！