无涯教程网

Css 将宽度高度设置为百分比减go 像素

发布于12月31日

我正在try 创建一些可重用的CSS类，以便在我的网站上实现更高的一致性和更少的混乱，我一直在try 标准化我经常使用的一个东西.

我有一个容器<div>，我不想为它设置高度(因为它会根据它在站点上的位置而有所不同)，它的内部是一个标题<div>，然后是unordered list个项，所有这些项都应用了CSS.

它看起来很像这样:

Widget

我希望unordered list占据容器<div>中的剩余空间，因为我知道头<div>有18px高.我只是不知道如何将列表的高度指定为"100%减go 18px的结果".

我在So的其他几个上下文中也看到过这个问题，但我认为对于我的特定情况，再次提出这个问题是值得的.在这种情况下，有人有什么建议吗？

推荐答案

您可以使用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);

Css相关问答推荐

视频覆盖不适用于reactjs样式的组件

在主零部件悬停上对子零部件设置Angular 样式

设置项目的最大宽度和最大高度

为什么继承时1rem值不同？

两列网格中左列第一个文本正下方的按钮

如何引用 SCSS 中的现有类？

混合网格自动布局与固定的行列位置

有没有办法将px单位添加到 Sass mixin 的参数数组中？

CSS 字符串变量的正确null值是多少？

Blazor 组件未链接 css

CSS Slanding Div 边缘在图像上

Icomoon：如何避免重复索引(具有相同内容 ID 的不同图标)？

有没有办法让它比它更敏感？

使用 Flex Box Tailwind CSS 的元素不相等

如何使半圆的边框淡出？

为什么不能将特定于供应商的伪元素/类组合成一个规则集？

如何倾斜元素但保持文本正常(未倾斜)

更改最后一个
的 CSS

找到第一个可滚动的父级

CSS 悬停与 JavaScript 鼠标悬停

实用课程推荐

相关教程推荐