CSS:将宽度/高度设置为百分比减去像素
Meg*_*att 455 css height pixel
我已经在其他几个背景下看过这个问题了,但我认为值得再次询问我的具体案例.我正在尝试创建一些可重用的CSS类,以便在我的网站上实现更高的一致性和更少的混乱,而且我一直试图标准化我经常使用的一件事.
我有一个容器div,我不想设置它的高度(因为它会根据网站的位置而有所不同),里面是一个标题div,然后是一个无序的项目列表,所有这些都是CSS适用于他们.看起来很像这样:
我希望无序列表占用容器div中剩余的空间,知道标题div是18px高.我只是不知道如何将列表的高度指定为"100%减去18px的结果".有没有人在这种情况下有任何建议？
Lev*_*lho 842
我意识到这是一篇很老的帖子,但鉴于它没有被建议,值得一提的是,如果你正在编写符合CSS3标准的浏览器,你可以使用calc:
height: calc(100% - 18px);
这是值得的注意的是并不是所有的浏览器目前支持CSS3标准计算()函数,因此实现浏览器功能的特定版本可能需要如下所示:
/* Firefox */
height: -moz-calc(100% - 18px);
/* WebKit */
height: -webkit-calc(100% - 18px);
/* Opera */
height: -o-calc(100% - 18px);
/* Standard */
height: calc(100% - 18px);
- 请注意,减号周围的空格不是可选的:`100%-18px`,`100% - 18px`和`100%-18px`在我测试的浏览器中不起作用. (32认同)
- 另外,如果你使用Less,你最好用`lessc --strict-math = on`编译一个文件,以便更少评估`calc`中的表达式 - 只是我遇到的一个问题并花了很多时间(从Less 2.0.0开始) (19认同)
- 是的,这暂时是正常的. (5认同)
- @DmitryWojciechowski 感谢您的指出。[此解决方法](https://github.com/less/less.js/issues/97) 也适用于 LESS: 4 `~'calc(50% - 20px)';` (3认同)
- @LeviBotelho我的不好.操作员周围没有空间. (2认同)
- 如果它不起作用，请使用“100vh”而不是“100%”。 (2认同)
Nic*_*ler 71
对于一些不同的方法,您可以在列表中使用这样的东西:
position: absolute;
top: 18px;
bottom: 0px;
width: 100%;
只要父容器具有,这就可以工作 position: relative;
puf*_*pio 25
我使用Jquery
function setSizes() {
var containerHeight = $("#listContainer").height();
$("#myList").height(containerHeight - 18);
}
然后我绑定窗口调整大小以重新调整浏览器窗口大小(如果容器的大小更改与窗口调整大小)
$(window).resize(function() { setSizes(); });
- @puffpio,当然JS是一种根据具体情况来实现这一目标的方法.但正如我所说,我正在努力使CSS通用,应用于多个页面(顺便从主页继承).所以我不想使用JS.但是谢谢你的回答. (12认同)
- @greg,如果CSS有更多有用的功能,它会有所帮助.你必须要做的一些事情是荒谬的. (8认同)
- 不要把你的风格放在JavaScript中. (7认同)
kal*_*azy 16
不要将高度定义为百分比,只需设置top=0和bottom=0,如下所示:
#div {
top: 0; bottom: 0;
position: absolute;
width: 100%;
}
假设17px标题高度
列出css:
height: 100%;
padding-top: 17px;
标题css:
height: 17px;
float: left;
width: 100%;
- 如果您发布了实际的CSS,那么对此进行故障排除将会更容易,因此我们可以确切地看到正在进行的交互.您可能尝试的另一件事是ul上的负上边距.`ul {margin-top:-17px; }` (2认同)
- 在您想要减去像素的元素上使用负边距.(所需元素)
- 制作
overflow:hidden;包含元素 - 切换到
overflow:auto;所需的元素.
它对我有用!
- 这对我来说就像一个魅力(我甚至不需要改变溢出).很好的解决方案,谢谢! (3认同)
尝试盒子大小.对于列表:
height: 100%;
/* Presuming 10px header height */
padding-top: 10px;
/* Firefox */
-moz-box-sizing: border-box;
/* WebKit */
-webkit-box-sizing: border-box;
/* Standard */
box-sizing: border-box;
对于标题:
position: absolute;
left: 0;
top: 0;
height: 10px;
当然,父容器应该具有以下内容:
position: relative;