使一個div定義另一個的高度

Question

我有一個textarea，onkeyup隨着內容的添加而擴展。 textarea的是一個div內部如下所示：

<div id='sendMes' class='container-fluid'> 
<form action='#' method='POST'> 
    <textarea onkeyup='auto_grow(this)' id='textarea' cols='50' name='msg_body' placeholder='Type a message...'></textarea> 
    <button id='post' type='submit' name='submit'><i class='fa fa-send'></i></button> 
</form> 
</div> 

的功能爲onkeyup事件如下：

function auto_grow(element) { 
    element.style.height = "5px"; 
    element.style.height = (element.scrollHeight)+"px"; 
} 

在div sendMes上的HTML代碼所指示的是下面的另一代碼爲messageThread及其代碼如下：

<div class="container-fluid" id="messageThread"> 
</div> 

因此，由於sendMes向上擴展它最終覆蓋messageThread div的內容。 請幫助我想出一個JavaScript函數，它將減小高度messageThread，因爲它增加了高度sendMes，反之亦然。

Answer 1

我想你想要的東西是無禮的話，在這裏你可以定義變量，並利用它們在你的文件：檢查了這一點http://sass-lang.com/guide

$change-height: 10px; 

#sendMes { 
    height: 10px + $change-height 
} 


#messageThread { 
    height: 10px - $change-height 
}