问题描述
我已经看到这个问题在几个其他上下文的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减去像素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!