CSS Calc函數未固定高度屬性

我試圖開發一個聊天插件，並且在顯示郵件時遇到問題。在這裏，它是：（需要一些部分被隱藏，因爲它是一個高度機密的項目）CSS Calc函數未固定高度屬性

<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

來源

2017-07-31 Baboo_

首先，你需要一個預處理器（如sass或更少）來使用像變量$ inputContainerHeight' – Vivick

然後這是什麼奇怪的語法'＃{$ inputContainerHeight}' – Vivick

我正在使用sccs a並且需要'＃{$ inputContainerHeight}'語法來插值。沒有它，我會獲得'高度：calc（100％ - $ inputContainerHeight）;' –

好吧，正如@CBroe所建議的那樣，我幫了我一個忙，並將每個組件轉換爲flex框，其中我定義了height屬性。在這個過程結束時，我仍然遇到了同樣的問題在Firefox上，但後來我發現在這篇文章中缺少的成分：Why doesn't flex item shrink past content size?。黑客將定義min-height: 0;（或者如果彎曲方向是水平的，則爲min-width）。

要回答最初的問題，一個嚴厲，但應得到@CBroe評論：

百分比的高度需要一個父元素有一個明確的高度開始與

問題關閉，謝謝爲你的幫助

來源

2017-08-01 12:49:19

您使用的是scss或css嗎？

因爲你不能在css中使用$inputContainerHeight: 70px;。你可以在scss中使用它。

來源

2017-07-31 11:11:19 pacanga

CSS Calc函數未固定高度屬性

回答

相關問題