2014-12-02 231 views
59

我有以下的较少文件的CSS规则:可以在CSS calc()中使用vh减去像素吗?

.container { 
    min-height: calc(100vh - 150px); 
} 

这并不在所有的工作。我想让容器充满窗口高度并减去页眉,页脚固定高度。我怎样才能做到这一点?

+2

看起来工作 - http://jsfiddle.net/ gz4zp1ua/2/ – 2014-12-02 19:29:15

+1

确保相关浏览器确实支持您要求的内容:http://caniuse.com/#feat=calc和http://caniuse.com/#feat=viewport-units。 – cimmanon 2014-12-02 19:43:42

+0

我已经关闭这个作为一个愚蠢的,因为该线程有更新的选项的细节也可能对其他人有用(最重要的是,该问题也有更高的观点和投票计数)。 – Harry 2015-12-04 13:48:21

回答

127

确实有效。问题在于我的编译器较少。它被编译到:

.container { 
    min-height: calc(-51vh); 
} 

在更短的文件,下面的代码修正:

.container { 
    min-height: calc(~"100vh - 150px"); 
} 

由于此链接:Less Aggressive Compilation with CSS3 calc

+0

这个伎俩!谢谢 – yngrdyn 2015-07-20 15:17:26

+10

被这个咬伤了。如果你需要在字符串中使用变量,你可以这样做:'calc(〜“100vh - @ {navbar-height}”)' – 2016-04-22 20:23:39

+1

完美的伎俩,感谢你!想知道为什么它在.css但不在.less – Destunk 2017-03-24 16:03:10