css vh单位减去固定高度
时间: 2023-07-02 12:08:42 浏览: 83
如果你想使用 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中怎么实现vm减vh
在 CSS 中,你可以使用计算表达式来实现 `vm` 减去 `vh` 的效果。下面是一个示例:
```css
div {
height: calc(100vm - 100vh);
}
```
在这个示例中,我们使用 `calc()` 函数来计算 `100vm - 100vh` 的结果,并将其作为 `height` 属性的值。这样,`div` 元素的高度将是视口高度的 100vm 减去视口高度的 100vh。
需要注意的是,`vm` 和 `vh` 单位都是相对于视口大小的单位。`vm` 表示视口宽度的百分之一,而 `vh` 表示视口高度的百分之一。在大多数情况下,视口的宽度和高度是相等的,所以减去 `100vh` 可以实现 `vm` 减去 `vh` 的效果。
请注意,这只是一个示例,具体使用时需要根据你的需求进行调整和适配。
使用css视窗单位后放大缩小仍然会超出父元素
使用视口单位(如vw、vh)确实可以帮助我们实现响应式设计,但是有时候确实会出现超出父元素的情况。这通常是因为我们在设置元素宽度或高度时,没有考虑到元素的内边距和边框所占据的空间。
一个解决方法是使用 `box-sizing: border-box;` 属性来设置盒模型。这将使元素的宽度和高度包括内边距和边框,而不会超出指定的宽度或高度。
另外,还可以使用 `calc()` 函数来计算元素的宽度或高度,以确保它们不会超出父元素。例如,我们可以使用以下代码:
```
width: calc(50% - 20px);
```
这将使元素的宽度为父元素宽度的一半减去20像素。
总之,使用视口单位可以帮助我们实现响应式设计,但我们需要仔细考虑元素的内边距和边框,以确保它们不会超出父元素。
相关推荐
![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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)