Sass: vh 和 px 之间的计算

Question

我在我的首屏幕上有一个幻灯片演示，我希望它与一个70像素高度的导航栏全屏显示，我正在尝试使用sass来实现这一点，以便不必编写javascript代码，但是

.slideshow{height:100vh-70px}

无法工作，我不知道sass如何计算，CSS结果为

.slideshow{height:99.27083vh}

我对这个问题进行了快速搜索，但没有找到有用的信息。那么这个问题能解决吗？

如果不能，请问是否有其他方法可以在不使用JavaScript的情况下实现？

- shenkwen

---

尝试使用 calc() —— 一种 CSS 功能。 - Jed Fox

Answer 1

试着使用CSS calc。它相当 被广泛支持。

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

- imjared

---

subarashiii *o* - mukade

Answer 2

不是这样的。

SASS计算是在将SASS编译为CSS时执行的。

视口的高度直到页面加载到浏览器中才会确定。因此，您无法将其转换为像素并进行计算。

- Quentin

Answer 3

我认为这只是一个空间问题，只需在运算符前后添加空格，并将其放在圆括号中间即可解决。

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

- Pratik Deshmane

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心找到有关如何编写良好答案的更多信息。 - Community

Answer 4

CSS中的高度可以使用以下方式：

height: auto|length|%|initial|inherit;

然而，每个值都应该用像px等数字来表示。每个值的描述如下：

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

length: 以px、cm等单位定义高度。

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

initial: 指定属性的值应设置为默认值。

inherit: 指定属性的值应从父元素继承。

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

P {height: 100px; Width:100px;}

- Kamiran Ibrahim