【问题标题】:sass: calculation between vh and pxsass:vh 和 px 之间的计算
【发布时间】:2017-02-16 14:46:33
【问题描述】:

我的登陆屏幕上有一个幻灯片,我希望它是全屏的,并带有一个 70 像素高度的导航栏,我正在尝试使用 sass,这样我就不必为此编写 javascript 代码,但是

.slideshow{height:100vh-70px}

不起作用。不知道sass是怎么计算出来的,css原来是

.slideshow{height:99.27083vh}

我对此问题进行了快速搜索,但找不到任何有用的信息。那么这是否可行?

如果没有,是否可以不使用 javascript?

【问题讨论】:

  • 试试calc()——一个CSS特性。

标签: javascript html css sass


【解决方案1】:

尝试使用 CSS 计算。很漂亮widely supported

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

【讨论】:

  • subarashiii *o*
【解决方案2】:

不,不是。

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

在页面加载到浏览器之前,视口的高度是未知的。所以你不能取那个高度,把它转换成像素,然后用它来计算。

【讨论】:

    【解决方案3】:

    我们使用的 CSS 高度如下所示: 高度:自动|长度|%|初始|继承;

    但是,这些中的每一个都应该用 px 等数字表示。每个值的描述如下:

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

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

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

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

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

    P {高度:100px; 宽度:100px;}

    【讨论】:

      猜你喜欢
      • 2012-08-10
      • 1970-01-01
      • 2016-04-23
      • 2011-03-20
      • 1970-01-01
      • 1970-01-01
      • 2018-04-09
      • 1970-01-01
      • 2012-10-27
      相关资源
      最近更新 更多