React/TypeScript聊天机器人：固定头尾+中间滚动布局实现

Tailwind CSS Approach #

The core fix is to make the parent container occupy the full viewport height, then use flex-1 on the middle chat area to let it fill the remaining space automatically—no hardcoded heights needed.

Updated Code #

<div className="flex flex-col h-screen">
  {/* Fixed Top Header */}
  <header className="bg-slate-100 p-4 shadow">
    {/* Header content (e.g., chat title, user profile) */}
  </header>
  
  {/* Scrollable Chat Message Area */}
  <main className="flex-1 overflow-y-auto p-4">
    <ChatFeed />
  </main>
  
  {/* Fixed Bottom Footer */}
  <footer className="bg-slate-200 p-5 shadow-2xl">
    <ChatTextBox />
  </footer>
</div>

Key Adjustments: #

• Added h-screen to the parent flex container to enforce full viewport height.
• Removed hardcoded h-[800px] from <main>, replaced with flex-1 to make it expand and fill the gap between header and footer.
• Retained overflow-y-auto on <main> to enable vertical scrolling when chat content exceeds available space.
• Included a sample header to match your requirement of a fixed top bar (adjust styling to fit your design).

Native CSS Approach #

If you prefer native CSS, the logic mirrors the Tailwind solution—using flexbox to manage space distribution without fixed heights.

CSS Styles #

.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* Full viewport height */
}

.chat-header {
  background-color: #f1f5f9;
  padding: 1rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.chat-feed {
  flex: 1; /* Fill remaining space */
  overflow-y: auto;
  padding: 1rem;
}

.chat-footer {
  background-color: #e2e8f0;
  padding: 1.25rem;
  box-shadow: 0 -2px 4px rgba(0,0,0,0.1);
}

React Component Code #

<div className="chat-container">
  <header className="chat-header">
    {/* Header content */}
  </header>
  <main className="chat-feed">
    <ChatFeed />
  </main>
  <footer className="chat-footer">
    <ChatTextBox />
  </footer>
</div>

Additional Notes: #

• Ensure no parent elements have overflow: hidden that would block the viewport height from being applied.
• For mobile devices, add pb-[env(safe-area-inset-bottom)] (Tailwind) or padding-bottom: env(safe-area-inset-bottom); (native CSS) to the footer to avoid overlapping with device notches.

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