CSS：将宽度/高度设置为Percentage减去像素 [英] CSS: Setting width/height as Percentage minus pixels

问题描述

我已经看到这个问题在几个其他上下文的SO，但我认为这是值得再次询问我的具体情况。我试图创建一些可重用的CSS类，以提高一致性，在我的网站上更少的杂乱，我一直努力标准化我经常使用的一件事。

I've seen this question asked in a couple other contexts on SO, but I thought it would be worth asking again for my particular case. I'm trying to create some re-usable CSS classes for more consistency and less clutter on my site, and I'm stuck on trying to standardize one thing I use frequently.

我有一个容器div，我不想设置的高度（因为它将取决于网站上的位置而变化），在里面它是一个标题div，然后一个无序的项目列表，所有应用CSS。看起来很像这样：

I have a container div that I don't want to set the height for (because it will vary depending on where on the site it is), and inside it is a header div, and then an unordered list of items, all with CSS applied to them. It looks a lot like this:

我想无序列表占用容器div中的剩余空间，知道标题div的高度为18px。我只是不知道如何指定列表的高度为100％减18px的结果。在这种情况下，有没有人有任何建议？

I want the unordered list to take up the remaining room in the container div, knowing that the header div is 18px tall. I just don't know how to specify the list's height as "the result of 100% minus 18px". Does anyone have any advice in this situation?

推荐答案

我意识到这是一个旧帖子，建议值得一提的是，如果你是为CSS3兼容的浏览器编写，你可以使用 calc ：

I realise this is an old post, but given that it hasn't been suggested it is worth mentioning that if you are writing for CSS3-compliant browsers, you can use calc:

height: calc(100% - 18px);

值得注意的是，并非所有浏览器都支持标准的CSS3 calc该功能的浏览器特定版本可能需要如下：

It's worth it to note that not all browsers currently support the standard CSS3 calc() function, so implementing the browser specific versions of the function may be required like the following:

/* Firefox */
height: -moz-calc(100% - 18px);
/* WebKit */
height: -webkit-calc(100% - 18px);
/* Opera */
height: -o-calc(100% - 18px);
/* Standard */
height: calc(100% - 18px);

这篇关于CSS：将宽度/高度设置为Percentage减去像素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！