textarea内容溢出至ActionBar下方的问题及解决诉求

架构老林

2026-7-5

解决内容区域被底部固定工具栏遮挡的问题

问题场景

网页结构如下：

<div>
  <div class="Header"></div>
  <div class="Contents">包含随输入垂直动态增长的textarea，无法设置固定高度</div>
  <div class="ActionBar">固定在页面底部（bottom: 0）</div>
</div>

当.Contents内的textarea内容过多时，会延伸至.ActionBar下方，导致新输入的文本被遮挡，需手动滚动才能查看。

解决方案

方案1：用内边距避开工具栏

给.Contents添加底部内边距，值等于.ActionBar的高度，确保内容不会延伸到工具栏下方；同时设置.Contents可垂直滚动，内容超出时自动滚动：

.Contents {
  /* 假设ActionBar高度为60px，根据实际值调整 */
  padding-bottom: 60px;
  overflow-y: auto;
}

.ActionBar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  /* 明确设置工具栏高度 */
  height: 60px;
}

方案2：Flex布局分配空间

给父容器设置垂直Flex布局，让.Contents占据头部和工具栏之外的剩余空间，同时保留滚动和底部内边距：

/* 父容器 */
div:first-of-type {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.Header {
  /* 头部固定高度，按需调整 */
  height: 50px;
}

.Contents {
  flex: 1;
  padding-bottom: 60px;
  overflow-y: auto;
}

.ActionBar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
}