将宽度/高度设置为减去像素的百分比 [英] Setting width/height as percentage minus pixels
问题描述
我试图创建一些可重用的CSS类,以提高网站的一致性和混乱度,而且我坚持尝试标准化我经常使用的一件事.
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.
看起来很像这样:
我希望无序列表占用容器< 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
".
我已经在SO的其他几个上下文中看到了这个问题,但是我认为有必要再次询问我的特殊情况.在这种情况下,有人对您有任何建议吗?
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. Does anyone have any advice in this situation?
推荐答案
您可以使用 calc
:
height: calc(100% - 18px);
请注意,某些旧的浏览器不支持CSS3 calc()
函数,因此可能需要实现该功能的供应商特定版本:
Note that some old browsers don't support the CSS3 calc()
function, so implementing the vendor-specific versions of the function may be required:
/* Firefox */
height: -moz-calc(100% - 18px);
/* WebKit */
height: -webkit-calc(100% - 18px);
/* Opera */
height: -o-calc(100% - 18px);
/* Standard */
height: calc(100% - 18px);
这篇关于将宽度/高度设置为减去像素的百分比的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!