如何将文本域设置为100%宽度和高度？

Question

如何设置 <textarea> 占据浏览器窗口的100%宽度和高度？

例如，以下代码无法实现：

html, body, textarea {
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
  height: 100%;
}

<textarea>Text goes here</textarea>

jsFiddle

由于它占用略高于窗口的100％，导致出现滚动条：

如何使<textarea>占用100％的空间？

额外阅读

• 如何设置的宽度和高度？</a></li> <li><a href="https://dev59.com/JGEi5IYBdhLWcg3wd8EF">如何在Bootstrap 3中将Textarea设置为100％高度？</a></li> <li><a href="https://dev59.com/zHXZa4cB1Zd3GeqPAPJV">我想将TextArea的高度设置为XHTML 1.0 Transitional中表格单元格的100％</a></li> <li><a href="https://stackoverflow.com/questions/5445948">当我在CSS或纯HTML中设置时，我的文本区域的宽度不会达到100％？</a></li> <li><a href="https://dev59.com/T3VC5IYBdhLWcg3whBaj">如何在存在CSS填充时使TextArea占用100％宽度而不溢出？</a></li> <li><a href="https://dev59.com/dWw15IYBdhLWcg3wJ4cR">Textarea以填充父容器，带有填充</a></li> <li><a href="https://dev59.com/6FjUa4cB1Zd3GeqPOSL7">如何使文本区域具有100％的宽度并保留其边距？</a></li> <li><a href="https://www.sitepoint.com/community/t/100-textarea-problem/2547" rel="noreferrer">100％文本区域问题</a></li> </ul>

- Ian Boyd

---

文本域的绝对定位是否适合您？textarea { position:absolute; }似乎可以解决问题。 - j08691

Answer 1

这个方法可行。或者在你的代码中的textarea中添加display:block即可。

html, body {
  margin: 0;
  padding: 0;
  border: 0;
}
* {
box-sizing: border-box;
}

textarea {
  width: 100%;
  height: 100vh;
  display: block;
 }

<textarea placeholder="message"></textarea>

- patelarpan

Answer 2

问题是由于垂直对齐，inline-block/inline 元素存在 常见的空格问题。如果您检查 Google 的 dev 工具，您会看到这个信息：

所以为了修复它，您只需要调整垂直对齐或使文本区域成为一个块级元素（就像其他答案中提供的一样）：

html, body, textarea {
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
  height: 100%;
}
textarea {
 vertical-align:top;
}

<textarea>Text goes here</textarea>

- Temani Afif

Answer 3

html, body {
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
  height: 100%;
}
textarea {
  margin: 0;
  padding: 0;
  border: 0;
  width: 100%;
  height: 100%;
  display:block;
  resize:none;/*Add this if you dont want users to resize */
}

<textarea>Text goes here</textarea>

- Gautam Naik

Answer 4

只需为html和body标记删除宽度和高度即可。

稍后再感谢我。

- kanny im