在 div 中设置 textarea 占用所有可用空间（除顶部 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 / IE中，文本区域没有占用div中所有可用的空间。

如何设置使工具栏占据div顶部的40px，并且文本区域占用其余所有高度。

我正在动态调整大小，因此无法为文本区域使用“px”高度或宽度。

Codepen链接：http://codepen.io/anon/pen/pDgvq

- Sam Saffron

---

这很奇怪 - 它适用于其他任何块元素，但在IE和Firefox中不适用于文本区域。我想知道为什么... - BoltClock

你是否尝试过为Textarea显式地设置{{{box-sizing: border-box;}}}，也许在FF/IE中对Textareas的处理方式与GC不同？ - Bastian Rang

@BastianRang 盒模型的 box-sizing 属性设置为 border-box，在 IE 浏览器中似乎没有任何效果。 - Sam Saffron

Answer 1

更好的建议

将文本区域的宽度和高度设为100％。然后，给它一个40px的透明上边框（颜色实际上并不重要）。请务必设置盒模型为“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;
}

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

- Sampson

---

你应该将其保存为 fork 副本或其他什么东西。我看到的是与问题中相同的 URL。 - BoltClock

这个可能行，但负面影响是我无法继承容器的背景 ... 我喜欢这种解决方案，很有创意。 - Sam Saffron

@SamSaffron 如果需要的话，您可以将容器的 border-top 设置为 40px，并将其用作继承的背景... 我现在感觉很不舒服。 - Sampson

翻译：糟糕，在我的应用程序中我做不到那个...已经卡在将包装器大小设置为100%上。 - Sam Saffron

@SamSaffron 我认为我有一个更好的解决方案 - 检查前置替代方案。 - Sampson

尽管这个代码看起来很糟糕，但它似乎完全可行，我喜欢它，超级有创意，从未想过我会以这种方式使用边框。 - Sam Saffron

Answer 2

Firefox和IE9+都支持calc()CSS函数（但是IE8不支持，如果你要支持IE8的话就要考虑一下了）。

我已经将以下代码添加到你的pen的textarea的CSS中（更新版本）：

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

内边距只是为了规范化；您可以选择适合自己需求的任何值，但一定要相应地调整calc()中的像素值。宽度的2px是为了补偿左右边框；高度的41px中，40是工具栏的高度，1是底部边框的高度。

- balpha

Answer 3

在 textarea 中添加 width:-moz-available; height:100%;resize: none;。

 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

- Sowmya

---

这会导致textarea超出div的剩余高度，因为工具栏占据了顶部的前40px。 - BoltClock

我说的是高度，不是宽度。你的更新演示中没有任何区别。 - BoltClock

Answer 4

我希望这是你期望的结果: 演示。

#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%;
}

- mflatischler

Answer 5

您可以使用百分比为文本区域设置高度和宽度，也可以将工具栏div的顶部应用于百分比。 例如，如果顶部为10％，则将90％的高度赋予文本区域。

- Anu