Sass: vh和px之间的计算

sass: calculation between vh and px

本文关键字：之间 计算 px vh Sass      更新时间：2023-09-26

我的着陆屏幕上有一个幻灯片，我希望它是全屏的，并结合70px高度的导航条，我试图使用sass，这样我就不必为此编写javascript代码了，但是

.slideshow{height:100vh-70px}

是行不通的。我不知道sass是怎么计算的，CSS结果是

.slideshow{height:99.27083vh}

我对这个问题做了一个快速搜索，但找不到任何有用的信息。那么，这到底可行吗?

如果没有，有没有办法做到没有javascript?

尝试使用CSS calc，它被广泛支持。

.slideshow {
    height: calc( 100vh - 70px );
}

不，它不是。

SASS计算在SASS被编译成CSS时执行。

直到页面加载到浏览器中才知道视口的高度。所以你不能把高度转换成像素，然后用它来计算

我认为这只是一个空间问题只要在运算符前后加上空格，并把它放在圆括号之间，就可以了。

。幻灯片{高度:(100vh - 70px);}

css的高度是这样使用的:初始长度高度:汽车| | % | |继承;

但是，每一个都应该用px或等数字表示。每个值的描述如下:

auto:(默认)浏览器计算高度

length:定义高度，单位为px, cm等。

%:以包含块的百分比定义高度。

initial:指定该属性的值应设置为默认值。inherit:指定该属性的值应该从父元素继承。

设置段落高度和宽度的示例如下:

p {height: 100px;宽度:100 px;}

相关文章：