如何使用 CSS `calc()` 根據父容器動態管理元素高度？

使用 CSS 百分比和減法進行動態高度管理

建立一致且整潔的網頁設計通常涉及實現可重複使用的 CSS 類別。一個常見的挑戰是為容器建立標準化高度，同時保持其動態特性。

在所描述的場景中，容器

根據其在頁面上的位置，其高度會有所不同。在這個容器內，有一個標題

。和無序列表

。目標是讓
在考慮標題的固定高度 18px 後佔據剩餘空間。

要實現這一點，我們可以利用 CSS calc() 函數：

height: calc(100% - 18px);

這會指示瀏覽器計算高度

的作為容器高度的 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);

透過利用calc() 函數，我們可以有效地管理動態場景中的高度，創建一致且適應性強的佈局。

以上是如何使用 CSS `calc()` 根據父容器動態管理元素高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！