如何在 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中文网其他相关文章！