css 当前高度 减固定值 当前高度未知
时间: 2023-07-26 22:08:49 浏览: 100
如果你想用 CSS 计算当前高度减去一个固定值,但是当前高度未知,可以使用 CSS 变量和 calc() 函数来实现。假设你想让一个元素的高度减去 20 像素,可以按照以下步骤进行操作:
1. 在元素的样式中定义一个 CSS 变量,例如:
```css
.element {
--height: 300px;
height: var(--height);
}
```
这里我们将元素的高度设置为一个变量 `--height`,初始值为 300px。
2. 在需要计算高度的属性中使用 calc() 函数,例如:
```css
.element {
--height: 300px;
height: calc(var(--height) - 20px);
}
```
这里我们使用 `calc()` 函数来计算当前高度减去 20px,得到最终的高度。
这样做的好处是,如果你需要改变元素的高度,只需要修改变量的值即可,不需要改变计算公式。例如,如果你需要将元素的高度改为 400px,只需要修改 `--height` 变量的值为 400px,而不需要修改计算公式。
相关问题
css vh单位减去固定高度
如果你想使用 CSS 的 `vh` 单位,并且需要减去一个固定的高度,可以使用 CSS 变量来实现。具体步骤如下:
1. 在根元素(通常是 `<html>` 元素)中定义一个 CSS 变量,表示要减去的高度,比如:
```css
:root {
--header-height: 100px;
}
```
2. 在需要使用 `vh` 单位的元素中,使用 `calc()` 函数来计算实际的高度,如下所示:
```css
.my-element {
height: calc(100vh - var(--header-height));
}
```
这样,`.my-element` 元素的高度就是屏幕高度减去 `--header-height` 变量所表示的固定高度。
注意,使用 `calc()` 函数时,其中的数值和单位之间需要添加空格,否则会出现语法错误。
css 设置标签高度在当前高度基础上减30像素
可以使用CSS的calc()函数来计算高度:
```css
height: calc(100% - 30px);
```
这将把标签的高度设置为当前高度减去30像素。请注意,这将只在父元素的高度已知情况下起作用。如果父元素的高度未知,则无法使用这种方法。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)