html - 设置 textarea 以占用 div 中的所有可用空间(减去顶部的 N 像素)

Question

我正在尝试为文本区域设置自定义工具栏，我有以下内容

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，而文本区域占用所有剩余的高度。

我正在动态调整这些东西的大小，所以不能为文本区域使用“px”高度或宽度。

代码笔在这里:http://codepen.io/anon/pen/pDgvq

Answer 1

更好的建议

将文本区域的宽度和高度设置为 100%。然后，给它一个 40px 的透明顶部边框(实际上颜色并不重要)。请务必将 box-sizing 设置为 border-box。现在将相关工具栏放在更高的 z-index - 瞧。

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

老歌

与其向下移动文本区域，不如向上移动工具栏:

#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