Question

我正在尝试开发一个聊天插件，在显示消息方面我遇到了问题。这是:(某些部分需要隐藏，因为它是一个高度机密的项目）

<div id="tab-conversation">
   <div id="conversation-container"></div>
   <div id="input-container"></div>
</div>

$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

Answer 1

好的，正如@CBroe所建议的那样，我帮自己一个忙，并将每个组件都转换为flex框，我在其中定义了height属性。在这个过程的最后，我仍然面对firefox上的同样问题，但后来我在帖子中找到了缺失的成分：Why doesn't flex item shrink past content size?。如果弹性方向是水平的，那么黑客就是定义min-height: 0;（或min-width。

回答最初的问题，来自@CBroe的一个严厉但应得的评论：

以百分比表示的高度需要具有以
开头的显式高度的父元素

问题已关闭，感谢您的帮助

Answer 2

你正在使用scss或css吗？

因为您无法在css中使用$inputContainerHeight: 70px;。你可以在scss中使用它。

CSS Calc函数没有修复高度属性

2 个答案: