通过 css 和 react 状态联动动态调整 textarea 高度，使其初始占满可视区域、内容超出时仅内部滚动，不触发整个页面滚动。
通过 css 和 react 状态联动动态调整 textarea 高度，使其初始占满可视区域、内容超出时仅内部滚动，不触发整个页面滚动。
在 React 应用中，让 <textarea> 占满视口高度（如 calc(100vh - 5rem)）看似合理，但容易因默认边距、盒模型计算误差或父容器约束，导致页面出现不必要的垂直滚动条——尤其当内容未溢出时，底部仍多出几像素空白，触发 body 滚动。根本原因在于：height: 100vh 并非绝对安全；浏览器默认样式、行高、字体渲染差异及 box-sizing 缺失均可能造成高度微小溢出。
✅ 正确解法是 “视觉占满 + 内容自适应”双策略：
Auth0 React
下载
已弃用 — 请改用 `auth0` 技能（运行 `npx clawhub install auth0`）。适用于为 React 单页应用（SPA）添加 Auth0 登录、登出、受保护路由或用户会话功能。该技能集成 `@auth0/auth0-react` — 即使用户仅表述为“为我的 React 应用添加登录功能”或“保护我的 React 路由”，而未明确提及 Auth0，也应使用此技能。
-
CSS 层面确保无干扰
移除全局 * { margin: auto }（这是严重错误：margin: auto 在块级元素上无效，且会破坏布局逻辑）；重置 body 和 html 的 margin/padding；显式设置 box-sizing: border-box；禁用 textarea 的默认 resize 和溢出行为：
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.journal-page {
height: 100vh;
display: flex;
flex-direction: column;
padding: 4rem 22%;
box-sizing: border-box;
}
.entry-input {
font-size: 1.125rem;
width: 100%;
border: none;
outline: none;
resize: none;
background-color: white;
/* 关键：仅内容区可滚动，不撑开父容器 */
overflow-y: auto;
/* 防止内边距/边框增加高度 */
box-sizing: border-box;
/* 初始高度设为最小值，由 JS 动态控制 */
min-height: calc(100vh - 5rem);
max-height: calc(100vh - 5rem);
}-
React 层面动态同步高度
使用 useRef 获取 textarea DOM 节点，监听 input 事件，通过 scrollHeight 实时设置 style.height，并限制最大高度防止无限拉伸：
import { useRef, useEffect, useState } from 'react';
function JournalEntry() {
const textareaRef = useRef<HTMLTextAreaElement>(null);
const [value, setValue] = useState('');
// 初始化高度
useEffect(() => {
if (textareaRef.current) {
textareaRef.current.style.height = 'auto';
textareaRef.current.style.height = `${Math.min(
textareaRef.current.scrollHeight,
window.innerHeight - 80 // 留出顶部标题等空间
)}px`;
}
}, []);
const handleInput = () => {
if (textareaRef.current) {
textareaRef.current.style.height = 'auto';
const newHeight = Math.min(
textareaRef.current.scrollHeight,
window.innerHeight - 80
);
textareaRef.current.style.height = `${newHeight}px`;
}
};
return (
<div className="journal-page">
<h2 className="date-title">今日日记</h2>
<textarea
ref={textareaRef}
className="entry-input"
value={value}
onInput={handleInput}
onChange={(e) => setValue(e.target.value)}
placeholder="开始书写..."
/>
</div>
);
}
export default JournalEntry;⚠️ 注意事项：
- 避免在 height 上直接使用 100vh —— 它包含浏览器 UI 高度（如地址栏），在移动端易导致计算偏差；推荐用 window.innerHeight 动态计算更可靠。
- scrollHeight 包含 padding，因此需确保 box-sizing: border-box 已生效。
- 若使用 CSS-in-JS 或 Tailwind，务必检查是否意外注入了 margin 或 padding。
- 测试时清除浏览器缓存，避免旧样式干扰；用 Chrome DevTools 的 “Computed” 面板逐层检查 height、border、padding 实际值。
最终效果：textarea 初始高度精准匹配可用视口空间；输入内容增多时，内部自动滚动，页面 body 始终无滚动条——真正实现「所见即所得」的沉浸式编辑体验。
