前端布局尸检报告：输入框消失案背后的 CSS 密室杀人

标题：
《触目惊心！80% 移动端都有这个致命布局漏洞，你的输入框正在"消失"》

导语：

"用户投诉『输入框神秘消失』，新手程序员排查三天无果，资深 CSS 法医剖开浏览器尸骸，在层层叠叠的样式下发现了震惊业界的布局凶案现场..."

破案过程：

1. 凶案现场还原

   • 惊悚动图：聊天页面输入框随消息增多"坠入深渊"
   • 被害人特征：position: absolute + flex-1 的组合

2. 尸检报告（CSS 解剖学）

   /* 致命凶器 */
   .chat-area { 
     flex: 1; /* 吞噬所有空间 */
     overflow-y: auto; /* 伪装正常 */
   }
   .input-area {
     position: static; /* 死亡陷阱 */
   }
   

3. 三大凶手揭秘

   凶手	作案手法	指纹特征
   高度吞噬者	flex-1 + 无父容器高度	父容器 height:0
   空间折叠犯	未设 min-height	内容溢出容器
   定位幽灵	absolute 脱离文档流	输入框悬浮在消息海上

4. 终极反杀方案

   ✅ 复活术：`position: sticky` + `bottom:0`  
   ✅ 空间结界：`grid-template-rows: 1fr auto`  
   ✅ 防御装甲：`min-height: 100vh`（附兼容方案）
   

血泪案例：

某电商 App 因输入框消失导致转化率暴跌 27%，修复后客诉减少 92%（附 Before/After 数据对比图）