CSS：设置宽度/高度为百分比减去像素
我在其他情况下看到过这个问题，但我认为值得再次询问我的具体情况。 我正在尝试创建一些可重用的CSS类，以便在我的网站上实现更高的一致性和更少的混乱，并且我试图将我经常使用的一件事标准化。
我有一个容器div，我不想为它设置高度（因为它取决于它在网站上的位置），并且它里面是一个标题div，然后是一个无序的项目列表，全部使用CSS适用于他们。 它看起来很像这样：
我希望无序列表占用容器div中的剩余空间，并知道标题div的高度为18px。 我只是不知道如何将列表的高度指定为“100％减去18px的结果”。 有没有人在这种情况下有任何建议？
我意识到这是一篇旧文章，但鉴于尚未提出，值得一提的是，如果您正在编写符合CSS3标准的浏览器，则可以使用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);
对于一种不同的方法，你可以在列表中使用类似这样的东西：
position: absolute;
top: 18px;
bottom: 0px;
width: 100%;
只要父容器的position: relative;
我为此使用Jquery
function setSizes() {
var containerHeight = $("#listContainer").height();
$("#myList").height(containerHeight - 18);
}
然后我绑定窗口调整大小以重新调整浏览器窗口的大小（如果容器的大小随窗口大小改变）
$(window).resize(function() { setSizes(); });