如何设置textarea内容溢出，避免文本超出自定义footer

嘿，我来帮你搞定这个问题！你现在遇到的情况是textarea里的文本超出了自定义的footer区域（就是那条横线和发送按钮的部分），核心问题在于当前布局没有明确划分textarea的可编辑区域和footer区域，而且overflow: hidden的设置会直接隐藏超出文本，而不是让它滚动。咱们一步步来调整：

1. 调整布局结构与容器定位 #

首先，给包裹textarea和footer的form-group添加相对定位，这样footer的绝对定位会相对于这个容器生效，不会乱跑：

#message .form-group {
  position: relative;
  min-height: 250px; /* 保持你原来的最小高度 */
}

2. 重新设置textarea的样式 #

把textarea的padding-bottom去掉，换成overflow-y: auto（让文本超出时显示垂直滚动条），同时通过计算高度留出footer的空间，确保文本不会跑到footer下面：

#message textarea {
  resize: none;
  width: 100%;
  min-height: calc(100% - 45px); /* 减去footer的高度，可根据实际情况调整数值 */
  overflow-y: auto; /* 超出时显示滚动条 */
  box-sizing: border-box; /* 确保padding和border不会撑大元素 */
}

3. 固定Footer的位置 #

调整footer相关元素的定位，让它牢牢固定在容器底部，同时去掉容易导致布局混乱的负margin：

#sendMsg {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 0;
}

#sendMsg #separator hr {
  margin: 0 0 10px 0; /* 调整横线间距，去掉负margin */
}

#sendMsg #contactFormBtn, #sendMsg #showContactErrMsg {
  position: static; /* 去掉绝对定位，用Bootstrap栅格正常排列 */
  margin-top: 0;
}

修改后的完整代码 #

HTML部分：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row" id="message">
  <div class="col-xs-offset-1 col-xs-10">
    <div class="form-group">
      <label class="formLabel"><i class="fa fa-sticky-note-o"></i> Message </label>
      <textarea class="form-control formInput" id='inputContactMsg'></textarea>
      <div class="row" id='sendMsg'>
        <div class="row" id='separator'>
          <div class="col-xs-offset-2 col-xs-8">
            <hr style="height: 0.5px; background-color: silver;">
          </div>
        </div>
        <div class="col-xs-8">
          <strong id='showContactErrMsg'></strong>
        </div>
        <div class="col-xs-4">
          <button type="submit" id='contactFormBtn'>Send</button>
        </div>
      </div>
    </div>
  </div>
</div>

CSS部分：

#message .form-group {
  position: relative;
  min-height: 250px;
}

#message textarea {
  resize: none;
  width: 100%;
  min-height: calc(100% - 45px);
  overflow-y: auto;
  box-sizing: border-box;
}

#sendMsg {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 0;
}

#sendMsg #separator hr {
  margin: 0 0 10px 0;
  height: 0.5px;
  background-color: silver;
}

#sendMsg #contactFormBtn, #sendMsg #showContactErrMsg {
  position: static;
  margin-top: 0;
}

#sendMsg #showContactErrMsg {
  padding-left: 40px;
  font-size: 12px;
}

#showContactErrMsg {
  font-size: 14px;
  color: maroon;
  font-family: "Century Gothic";
}

为什么这样改？ #

• 用相对定位的容器包裹textarea和footer，确保footer的位置始终固定在容器底部，不会被textarea内容挤动。
• 通过calc(100% - 45px)让textarea的高度自动适配容器，留出footer的空间，文本到达边界时就会触发滚动条。
• 把footer元素的绝对定位改成static，利用Bootstrap栅格系统正常排列，避免定位混乱。

这样调整后，textarea里的文本就会在到达footer之前开始滚动，再也不会覆盖你的自定义footer啦！

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