使用指南针获取屏幕高度

Question

我想知道如何使用Compass和Sass（不是javascript）获得屏幕高度？

我不想使用像“100％”这样的百分比...

安东尼

Answer 1

因为您使用的是默认（内容框）框大小模型，所以添加到height: 100%元素的任何顶部/底部填充都会增加通过视口的总高度（不好！）。您可以使用边框模型解决此问题，这会导致填充“向内推送内容”。

在边框框模型下，在尺寸为600px x 600px的元素中，添加padding: 50px会将内容限制为550px x 550px。以下CSS片段将此模型应用于页面上的所有元素：

* {
  box-sizing: border-box;
}

如果您正在尝试制作单页应用，您可能还会发现固定定位非常有用。这里有一些示例元素的CSS几乎填满了浏览器视口，但是留下了一点空间：

#an-excellent-app {
   position: fixed;
   top: 20px;
   bottom: 20px;
   left: 20px;
   right: 20px;
}

如果您有反应，可以使用百分比代替px。祝你好运！