css - 将宽度/高度设置为减去像素的百分比

我正在尝试创建一些可重用的CSS类，以提高网站的一致性和减少困惑，而且我坚持尝试标准化我经常使用的一件事。

我有一个容器<div>，我不想为其设置高度(因为它会根据其在站点上的位置而有所不同)，并且在其中是 header <div>，然后是一个无序列表，所有元素将CSS应用于他们。

看起来很像这样:

我希望无序列表占用容器<div>中的剩余空间，因为 header <div>高了18px。我只是不知道如何将列表的高度指定为“100%减去18px的结果”。

我已经在SO的其他几个上下文中看到了这个问题，但是我认为有必要再次询问我的特殊情况。在这种情况下，有人对您有任何建议吗？

最佳答案

您可以使用calc:

height: calc(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);