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

概述我正在尝试为textarea设置自定义工具栏,我有以下内容 HTML： <div id="main"> <div id="toolbar"></div> <textarea></textarea></div> CSS： #main { background-color: #ddd; height: 400px; width: 400px; position: relati @H_502_4@ 我正在尝试为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

@H_502_4@解决方法 更好的建议

将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

@H_502_4@ @H_502_4@ @H_502_4@ @H_502_4@ 总结

以上是内存溢出为你收集整理的html – 设置textarea以消耗div中的所有可用空间(减去顶部的N个像素)全部内容，希望文章能够帮你解决html – 设置textarea以消耗div中的所有可用空间(减去顶部的N个像素)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。