如何基于窗口尺寸设置textarea元素高度？CSS能否实现？

你的问题出在百分比高度的计算逻辑上：CSS里的height: 100%是相对于父元素的计算高度的，如果父元素（比如body和html）没有明确设置高度，这个百分比就无法生效。另外你还要考虑页面上方按钮栏占据的空间，直接用100%会让textarea超出窗口。

下面给你两种可行的方案，都只用CSS：

方案一：使用Flexbox布局（推荐，更简洁） #

Flexbox可以轻松实现自适应高度和并排布局，还能自动处理间距：

完整代码： #

/* 重置默认样式，清除html/body的margin/padding，设置高度100% */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.btn-group button {
  background: #DF6C6C;
  border-color: transparent;
  color: white;
  padding: 10px 24px;
  cursor: pointer;
  float: left;
  outline: 0px !important;
  -webkit-appearance: none;
}
.btn-group button:not(:last-child) {
  border-right: none;
}
.btn-group:after {
  content: "";
  clear: both;
  display: table;
}
.btn-group button:hover {
  background-color: #E58B8B;
}
.wrapper {
  text-align: center;
  /* 给按钮栏留固定的上下间距 */
  padding: 5px 0;
}

/* 用flex容器包裹两个textarea */
.textarea-container {
  display: flex;
  /* 占满剩余的窗口高度 */
  height: calc(100% - 56px); /* 56px是按钮栏的大致高度，可根据实际调整 */
  gap: 20px; /* 两个textarea之间的间距，替代margin的水平间距 */
  padding: 0 10px;
}

textarea {
  resize: none;
  margin: 5px 0; /* 只保留上下margin，水平间距用容器的gap和padding */
  border-radius: 8px;
  outline: 0px !important;
  -webkit-appearance: none;
  /* 让两个textarea平分可用宽度 */
  flex: 1;
  /* 高度占满容器的100%，自动适配剩余空间 */
  height: 100%;
}

<body>
  <div class="wrapper">
    <div class="btn-group">
      <button>Button1</button>
      <button>Button2</button>
      <button>Button3</button>
      <button>Button4</button>
      <button>Button5</button>
      <button>Button6</button>
    </div>
  </div>
  <!-- 新增容器包裹两个textarea -->
  <div class="textarea-container">
    <textarea></textarea>
    <textarea></textarea>
  </div>
</body>

方案说明： #

• 先给html和body设置height:100%并清除默认边距，让页面根元素占满窗口高度。
• 用calc(100% - 56px)计算textarea容器的高度，减去按钮栏的高度，避免内容超出窗口。
• Flex容器的gap属性直接控制两个textarea的水平间距，比用margin更直观。
• flex:1让两个textarea自动平分可用宽度，高度设为100%就能占满容器的剩余高度。

方案二：使用视口单位（vh） #

如果你不想用flex，也可以用视口单位vh（1vh等于窗口高度的1%），直接计算textarea的高度：

html, body {
  margin: 0;
  padding: 0;
}

/* 按钮栏样式不变，略 */

textarea {
  resize: none;
  margin: 5px 10px;
  border-radius: 8px;
  outline: 0;
  -webkit-appearance: none;
  /* 减去按钮栏高度（约56px）和上下margin（5px*2） */
  height: calc(100vh - 56px - 10px);
  /* 两个textarea并排，设置宽度 */
  width: calc(50% - 20px); /* 50%减去左右margin的总和 */
  float: left;
}

方案说明： #

• 100vh是整个窗口的高度，减去按钮栏的高度和textarea的上下margin，就能得到textarea的适配高度。
• 用calc(50% - 20px)设置宽度，让两个textarea并排且留出间距。

为什么你的原代码里height:100%不生效？ #

因为你的body元素默认没有设置高度，它的高度是由内部内容撑开的，所以textarea的height:100%找不到可参考的父元素高度，自然无法生效。必须给html和body都设置height:100%，才能让子元素的百分比高度起作用。

内容的提问来源于stack exchange，提问作者dsax7