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 / ie 中，文本区域并没有消耗 div 中的所有可用空间。

如何设置它以使工具栏在 div 的顶部占据 40px，而 textarea 占用所有其余的高度。

我正在动态调整这些东西的大小，因此不能为 textarea 使用“px”高度或宽度。

Codepen在这里：http ://codepen.io/anon/pen/pDgvq

4

5 回答 5

5

更好的建议

将文本区域的宽度和高度设置为 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

于 2013-01-10T07:05:36.317 回答
3

Firefox 和 IE9+ 都支持CSS 功能（不过，您对calc()IE8 不走运；不确定您支持什么）。

我已将这些行添加到textarea您笔中的 CSS 中（更新版本）：

width: calc(100% - 2px);
height: calc(100% - 41px);
padding: 0;

填充仅用于规范化；您可以选择适合您需要的任何内容，但请务必calc()相应地调整像素值。for宽度是2px补偿左右边框；工具栏的41px高度为 40，底部边框的高度为 1。

于 2013-01-10T12:46:53.697 回答
1

添加width:-moz-available; height:100%;resize: none;到textarea

 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;  width:-moz-available; height:100%; 
  resize: none;  
}

更新的演示

另一种方法

您可以在 textarea 周围添加一个 div 并将 position:absolute 赋予该 div

HTML

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

  <div id="container">
  <textarea></textarea>
  </div>

</div>

CSS

#container{ 
  position:absolute;
  bottom:0px;
  top:40px; 
  width:100%
}
textarea {
  outline: none; 
  border: none;
  border-left: 1px solid #777;
  border-right: 1px solid #777;
  border-bottom: 1px solid #777;
  resize: none;  height:100%; width:99.5%
}

演示 2

于 2013-01-10T06:57:45.473 回答
0

您可以在 % 中为 textarea 使用高度和宽度，也可以在 % 中将顶部应用于工具栏 div 例如，如果顶部为 10%，则为 textarea 提供 90% 的高度。

于 2013-01-10T07:07:05.880 回答
0

我希望这是您想要的结果：Demo

#main {
  background-color: #ddd;
  width: 400px; height: 200px; 
  padding: 0;
}

div #toolbar {
  background: #444;
  width: 100%; height: 40px;
}

textarea {
  margin: 0; 
  width: 100%; height: 100%;
}
于 2013-01-10T07:29:35.550 回答