设置textarea以消耗div中的所有可用空间(减去顶部的N个像素)

Question

我正在尝试为textarea设置自定义工具栏,我有以下内容

HTML:

<div id="main">
  <div id="toolbar"></div>
  <textarea></textarea>
</div>

css:

#main {
  background-color: #ddd;
  height: 400px;
  width: 400px;
  position: relative;
}

#toolbar {
  background-color: #444;
  height: 40px;
  color: white;
}

textarea {
  outline: none; 
  border: none;
  border-left: 1px solid #777;
  border-right: 1px solid #777;
  border-bottom: 1px solid #777;
  margin: 0;
  position: absolute;
  top: 40px;
  bottom: 0;
  left: 0;
  right: 0;
}

它的工作方式与我在Chrome中的预期完全相同,但在firefox中,即文本区域不占用div中的所有可用空间.

如何设置它以使工具栏在div的顶部占用40px,并且textarea消耗所有其余高度.

我正在动态调整这个东西,所以不能使用textrea的"px"高度或宽度.

Codepen:http://codepen.io/anon/pen/pDgvq

Answer 1

更好的建议

将textarea的宽度和高度设置为100%.然后,给它一个40px的透明顶边(实际上颜色并不重要).务必将框大小设置为边框.现在将相对工具栏放在更高的z-index上 - 瞧.

笔:http://codepen.io/anon/pen/nFfam

过时的歌曲

而不是向下移动textarea,向上移动工具栏:

#main {
  background-color: #ddd;
  height: 200px; width: 400px;
  position: relative;
  top: 40px;
}

#toolbar {
  background-color: #444;
  height: 40px; width: 100%;
  position: absolute;
  top: -40px;
}

textarea {
  width: 100%; height: 100%;
  box-sizing: border-box;
}

笔:http://codepen.io/anon/pen/mEGyp