Question

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

不过，我希望它能够与基线对齐：

顶部很简单，我只需要给它一个填充，它是基线高度的倍数。
但是，对于底部，当视口的高度不是基线高度的倍数时，我在逻辑上以偏移量结束。

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

这是一个说明情况的小提琴：https://jsfiddle.net/andinse/qc0kmnsL/

注释掉了我想象的计算但是我怀疑我对Sass的可用时间感到困惑。

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

我仍然希望有一种解决方法;）

Answer 1

您无法计算容器高度，其偏移量或行数等级，因为sass不知道窗口大小（并且也无法对窗口调整大小做出反应）。您需要使用css函数calc()，它在运行时计算，但它不支持模运算符，这将有所帮助。它曾经得到过支持，但仅限于IE，所以它并不重要。

我看到2个解决方案，但我找不到任何解决方案，但无论如何我都会分享它们：

a）您预先确定了样式中的高度/行数，并且不允许自由调整样式。但是，您可以使用阅读屏幕高度的许多媒体查询来调整大小。您可以将此媒体查询放入sass for-loop中，以便针对不同的屏幕大小快速生成它们（类似$i * $line-height）。这是css唯一的解决方案。这将产生大量输出，因此最终的css可能会增加很多，并且您永远不会以这种方式覆盖所有屏幕尺寸。这很糟糕。

b）你可以通过取消最后一行＆＃34; line＆＃34;的额外溢出来使用javascript修改高度。这需要js，但适用于任何屏幕尺寸。不要忘记在窗口调整大小时调整它的大小，所以它总是很合适。

看一下实际的第二个解决方案：https://codepen.io/anon/pen/vZbjqK，我认为它比第一个更好。

Sass：将div的底部按到基线

1 个答案: