Materialize CSS如何阻止textarea内容溢出导致页面高度增加

问题根因 #

Materialize 1.x 版本默认给.materialize-textarea类绑定了输入时自动调整高度的JS逻辑，即使你设置了行内固定高度，该逻辑仍会动态修改文本域的min-height属性，导致文本域实际高度超出设定值，最终撑高整个页面生成多余空白区域。

解决方案 #

你可以通过以下两步修改实现需求，全程适配Electron环境无需兼容其他浏览器：

1. 新增CSS样式兜底 #

在<head>中加入如下样式，强制锁定文本域高度：

.fixed-textarea {
  height: 20rem !important;
  min-height: 20rem !important;
  max-height: 20rem !important;
  overflow-y: scroll !important;
}

2. 解绑Materialize自带的自动高度调整逻辑 #

在引入materialize.min.js的下方加入如下JS代码，禁用文本域的自动拉伸功能：

document.addEventListener('DOMContentLoaded', () => {
  const targetTextareas = document.querySelectorAll('.materialize-textarea');
  targetTextareas.forEach(textarea => {
    // 移除自动调整高度的事件绑定
    textarea.removeEventListener('input', M.textareaAutoResize);
    // 初始化时强制重置高度为设定值
    textarea.style.height = '20rem';
    // 给文本域添加上面定义的固定高度类
    textarea.classList.add('fixed-textarea');
  });
});

可选结构修复 #

你提供的示例代码中<main>标签错误写在了<head>标签内部，建议将<main>整块移动到<body>标签内，避免HTML结构不规范导致的偶发布局异常。

效果验证 #

修改完成后可同时满足两个需求：

• 文本域输入大量内容时，高度固定保持20rem，内容仅在文本域内部滚动，不会撑高页面产生底部空白
• 浏览器窗口高度缩小时，主页面滚动条正常触发，依然可以滚动查看完整的textarea元素

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