通过 css 高度计算与 react 动态调整相结合，让 textarea 占满可视区域且不触发全局滚动；关键在于禁用默认滚动、正确处理盒模型，并在内容变化时自动伸缩高度。
通过 css 高度计算与 react 动态调整相结合，让 textarea 占满可视区域且不触发全局滚动；关键在于禁用默认滚动、正确处理盒模型，并在内容变化时自动伸缩高度。
在 React 应用中，让 <textarea> 填满视口高度（如 calc(100vh - 5rem)）看似简单，但常因盒模型、边框、内边距或浏览器默认样式导致实际高度溢出，从而在页面底部产生不必要的垂直滚动条。根本原因在于：height: calc(100vh - X) 仅控制元素内容区高度，若存在 border、padding 或父容器 margin/padding，总占用空间将超出视口，触发 body 滚动。
✅ 正确解决方案需三步协同：
1. 重置盒模型并精确控制尺寸
为 .entry-input 添加 box-sizing: border-box，确保 height 包含 padding 和 border：
.entry-input {
font-size: 1.125rem;
width: 100%;
border: 1px solid #e0e0e0; /* 示例边框，需显式设置 */
outline: none;
resize: none;
height: calc(100vh - 5rem);
background-color: white;
padding: 1rem; /* 若需内边距，必须计入 box-sizing */
box-sizing: border-box; /* 关键！ */
overflow-y: auto; /* 内容超限时仅 textarea 自身滚动 */
}同时，确保父容器（如 .journal-page）无意外 padding-bottom 或 margin-bottom，并添加 overflow: hidden 防止继承溢出：
.journal-page {
padding: 4rem 22% 0; /* 移除底部 padding */
overflow: hidden;
}2. React 中动态适配内容高度（推荐进阶方案）
若需 textarea 随输入内容自然伸缩（而非固定视口高度），可结合 useRef 与 useEffect 实现自动调整：
import { useRef, useEffect, useState } from 'react';
function JournalEntry() {
const [value, setValue] = useState('');
const textareaRef = useRef<HTMLTextAreaElement>(null);
useEffect(() => {
const node = textareaRef.current;
if (!node) return;
// 重置高度以触发布局重新计算
node.style.height = 'auto';
// 设置为滚动高度（内容实际所需高度）
node.style.height = `${Math.min(node.scrollHeight, window.innerHeight - 80)}px`;
}, [value]);
return (
<textarea
ref={textareaRef}
className="entry-input"
value={value}
onChange={(e) => setValue(e.target.value)}
placeholder="Start writing..."
/>
);
}
export default JournalEntry;⚠️ 注意事项：
- scrollHeight 包含所有内容高度（即使被 overflow: hidden 截断），是动态调整的核心依据；
- 使用 Math.min(..., max-height) 防止 textarea 过高遮挡其他元素；
- 避免在 onChange 中直接调用 scrollHeight（可能因 DOM 未更新导致旧值），推荐用 useEffect 响应 value 变化；
- 若需严格限制最大高度，CSS 中补充 max-height: calc(100vh - 5rem) 并保持 overflow-y: auto。
3. 全局样式兜底
在根组件或 index.css 中确保 body 无干扰滚动：
body {
margin: 0;
padding: 0;
overflow-y: hidden; /* 仅当确定不需要页面滚动时启用 */
}但更稳妥的做法是 不锁定 body 滚动，而是确保所有子元素（尤其 .entry-input）自身消化溢出——这才是语义清晰、可维护性强的工程实践。最终效果：textarea 初始占满可用区域，内容增多时内部滚动，页面整体始终无多余滚动条。
