CSS Calc函数不固定高度属性
CSS Calc函数不固定高度属性
提问于 2017-07-31 11:04:56
我正在尝试开发一个聊天插件，当它显示消息时，我面临一个问题。这里是：(一些部分需要隐藏，因为它是一个高度机密的项目)
<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
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-08-01 12:49:19
好的，正如@CBroe所建议的那样，我帮了自己一个忙，将每个组件都转换为flex框，在其中定义了height属性。在这个过程的最后，我在firefox上仍然面临着同样的问题，但是我在那篇文章中发现了缺失的成分：为什么flex项目不缩小超过内容的大小？。hack是定义min-height: 0; (如果挠度方向是水平的，则定义min-width )。
在回答最初的问题时，@CBroe给出了一句严厉但值得评论的话：
高度(百分比)首先需要一个具有显式高度的父元素。
问题已结束，谢谢您的帮助
Stack Overflow用户
发布于 2017-07-31 11:11:19
您使用的是scss还是css？
因为你不能在css中使用$inputContainerHeight: 70px;。你可以在scss中使用它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45414189
复制相关文章
相似问题
腾讯云开发者
