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";
}

html代码上显示的div sendMes 位于ID为 messageThread 的另一个div下方，其代码如下：

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

因此，当 sendMes 向上扩展时，它最终会覆盖 messageThread div的内容。请帮助我提出一个javascript函数，它会降低 messageThread 的高度，因为它会增加 sendMes 的高度，反之亦然。

Answer 1

我认为您想要的是Sass，您可以在其中定义变量并在整个文件中使用它们：查看http://sass-lang.com/guide

$change-height:    10px;

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


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

使一个div定义另一个的高度

1 个答案: