CSS 如何使文本框填充 div 块

在本文中，我们将介绍如何使用 CSS 让文本框填充整个 div 块。通常情况下，文本框（textarea）的大小是根据其内容来确定的。但是有时候，我们希望将文本框的大小设置为和外部容器相同，以实现更好的布局效果或者统一的外观风格。下面是一些方法和示例来实现这个目标。

阅读更多：CSS 教程

方法一：使用百分比高度

一种常见的方法是使用百分比来设置文本框的高度，使其填充整个 div 块。这种方法适用于已知父容器固定高度的情况。以下是一个示例：

<div class="container">
  <textarea class="fill-textarea"></textarea>
</div>

<style>
.container {
  height: 200px;
  border: 1px solid #000;
}

.fill-textarea {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  resize: none;
}
</style>

在上面的示例中，我们首先创建一个具有固定高度的父容器 container，然后在其中放置一个文本框 fill-textarea。通过将文本框的宽度和高度设置为 100%，并设置 box-sizing: border-box 来包含边框在内，我们可以确保文本框填充整个父容器。

方法二：使用绝对定位

另一种方法是使用绝对定位将文本框放置在父容器中，并设置宽度和高度为 100%。以下是一个示例：

<div class="container">
  <textarea class="fill-textarea"></textarea>
</div>

<style>
.container {
  position: relative;
  height: 200px;
  border: 1px solid #000;
}

.fill-textarea {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  resize: none;
}
</style>

在这个示例中，我们将父容器 container 设置为相对定位，然后将文本框 fill-textarea 设置为绝对定位，并通过 top: 0 和 left: 0 将其放置在父容器的左上角。通过设置宽度和高度为 100%，我们可以确保文本框填充整个父容器。

方法三：使用 Flexbox 布局

还有一种方法是使用 Flexbox 布局来实现文本框填充整个 div 块。以下是一个示例：

<div class="container">
  <textarea class="fill-textarea"></textarea>
</div>

<style>
.container {
  display: flex;
  border: 1px solid #000;
}

.fill-textarea {
  flex: 1;
  box-sizing: border-box;
  resize: none;
}
</style>

在这个示例中，我们将父容器 container 设置为 Flex 容器，并通过 display: flex 启用 Flexbox 布局。然后，我们将文本框 fill-textarea 设置为 flex: 1，使其自动填充剩余的空间。