css的高度设定为函数,CSS Calc函数未固定高度属性

我试图开发一个聊天插件，并且在显示邮件时遇到问题。在这里，它是：(需要一些部分被隐藏，因为它是一个高度机密的项目)CSS Calc函数未固定高度属性

$inputContainerHeight: 70px;

#tab-conversation {

height: 100%;

}

#conversation-container {

height: -moz-calc(100% - #{$inputContainerHeight});

height: -webkit-calc(100% - #{$inputContainerHeight});

height: calc(100% - #{$inputContainerHeight});

overflow-y: auto;

padding: 10px;

padding-bottom: 0;

}

#input-container {

height: $inputContainerHeight;

}

当消息显示在conversation-container的input-container被推出因为conversation-container是一个小孩，并不想坚持其高度。即使使用max-height属性，它也无法工作。但是，当我用固定高度替换calc函数时，高度是固定的。我错过了什么？

编辑：我正在使用scss

2017-07-31

Baboo_

+0

首先，你需要一个预处理器(如sass或更少)来使用像变量$ inputContainerHeight' –

+0

然后这是什么奇怪的语法'＃{$ inputContainerHeight}' –

+0

我正在使用sccs a并且需要'＃{$ inputContainerHeight}'语法来插值。没有它，我会获得'高度：calc(100％ - $ inputContainerHeight);' –