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