如何移除表单报错时动态出现的滚动条？

要实现Header和表单固定不滚动、仅主内容可滚动，且表单高度变化时不出现页面滚动条，核心是用flex垂直布局让页面元素按视口高度分配空间，表单高度变化时自动挤压主内容的可滚动区域，而非让页面整体溢出。

具体步骤（结合你的Tailwind代码）：

1. 给页面最外层容器（比如<body>或包裹所有内容的父div）添加样式：

   <div class="min-h-screen flex flex-col overflow-hidden">
     <!-- Header、表单、主内容都放在这个容器内 -->
   </div>
   

   作用：强制容器占满视口高度，垂直排列子元素，同时隐藏容器自身的滚动条。

2. 调整Header样式，保留sticky top-0的同时添加flex-shrink-0，确保Header高度固定不被压缩：

   <header className='sticky top-0 z-[1000] flex-shrink-0'>
     <div className='flex items-center mx-auto max-w-content min-h-[50px] tablet:pl-10'>
       <div className='w-[80px] max-h-6 md:w-[100px]'></div>
       <img src='…' alt='logo' />
     </div>
   </header>
   

3. 给表单的外层容器添加flex-shrink-0，确保表单高度变化时不会被压缩，而是挤压主内容的空间：

   <div className='relative flex z-[1000] mx-auto w-full flex-shrink-0'>
     <div className='flex w-full max-w-content my-0 mx-auto pt-2 px-5'>
       <!-- 表单内容 -->
     </div>
   </div>
   

4. 给主内容容器添加flex-grow-1 overflow-y-auto，让它自动填充剩余空间，且仅自身出现滚动条：

   <div className='flex-grow-1 overflow-y-auto'>
     <!-- 搜索结果内容 -->
   </div>
   

原理说明 #

• min-h-screen flex flex-col让整个页面容器按视口高度垂直布局，子元素依次排列。
• flex-shrink-0作用在Header和表单上，禁止它们被压缩，高度由自身内容决定。
• flex-grow-1让主内容容器占据Header和表单之外的所有剩余空间，overflow-y:auto则在内容超出时仅主内容区域出现滚动条，不会触发页面整体滚动。

这样当表单出现错误文本导致高度增加时，主内容的可滚动区域会自动缩小，页面整体不会出现滚动条，完全符合需求。

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