Layout Sass：将div的底部捕捉到基线

我有一个在px中设置的内容基线。
我有一个div，它的高度必须相对于视口的高度调整大小

不过，我还是希望它捕捉到基线：

• 顶部很容易，我只需要给它一个填充物，是基线高度的倍数
• 但是，对于“底部”，当视口的高度不是基线高度的倍数时，逻辑上会以偏移结束

我的问题是：有没有一种Sass方法可以计算出这个偏移量是多少？

这里有一把小提琴可以说明这种情况：

注释掉是我想象中的计算，但我怀疑我对什么时候可以使用Sass感到困惑

$baseline-height: 36px;
// $line-count = floor((100vh in px) / $baseline-height);
// $extra-px = (100vh in px) - $line-count * $baseline-height;

---

我仍然希望有一个解决办法；）

您无法计算容器高度，其偏移量或行数取决于sass级别，因为sass不知道窗口大小（也无法对窗口大小做出反应）。您需要使用css函数

calc（）

，该函数在运行时进行计算，但它不支持模运算符，这会有所帮助。它曾经被支持过，但只在IE中支持，所以这并不重要

我看到了两种解决方案，但没有一种我觉得很好，但我还是要分享它们：

a） 您在样式中预定义了线的高度/数量，并且不允许自由调整其大小。不过，您可以使用许多媒体查询来调整其大小，以读取屏幕高度。您可以将此媒体查询放入sass for循环中，以针对不同的屏幕大小（如

$i*$line height

）快速生成它们。这是唯一的解决方案。这将产生大量的输出，因此最终的css可能会很重，并且您永远无法以这种方式覆盖所有屏幕大小。这很糟糕

b） 通过去掉最后一行的额外溢出，可以使用javascript修改高度。这需要js，但适用于任何屏幕大小。别忘了在调整窗口大小时调整它的大小，这样它总是很合适

---

看看第二个解决方案：我认为比第一个好。

太好了！这证实了我的怀疑。事情感觉清楚多了。非常感谢。