两行不同高度的CSS头部栏制作方法

本文深入解析了如何用现代CSS（Flex和Grid布局）优雅实现两行不同高度的头部栏，强调摒弃line-height伪布局和absolute/float等易失控方案；推荐外层flex-column配合min-height与flex: 0 0固定高度，或更简洁的Grid双行模板（兼容性允许时），同时详解响应式高度策略——优先采用rem/vh结合clamp()实现流体适配，辅以精准媒体查询，避免!important和JS干预；最后点明真正挑战不在代码实现，而在于间隙设计、焦点管理及折叠动效等需贴合产品逻辑的细节决策。

用 flex 布局实现两行头部，高度各自独立

直接用 display: flex + flex-direction: column，再给每行设固定或自适应高度，是最可控的方式。绝对定位或 float 容易破坏文档流，响应式时更难收场。

• 第一行（如 logo 区）设 height: 64px 或 min-height: 64px
• 第二行（如导航栏）设 height: 48px 或 flex: 0 0 48px（推荐后者，语义更准）
• 外层容器必须设 display: flex 和 flex-direction: column，不能只靠子元素自己撑开
• 避免对子元素用 position: absolute —— 后续加搜索框、用户头像等交互元素时，定位会互相打架

grid 布局写法更简洁，但 IE 不支持

如果项目不用兼容 IE11，display: grid 是更直观的选择：两行高度直接写在 grid-template-rows 里，无需额外 wrapper。

• 外层设 display: grid，grid-template-rows: 64px 48px
• 两行元素按顺序写进 HTML，不需额外 class 控制顺序
• 若某行内容超长（比如导航项过多换行），64px 会硬截断；改用 minmax(64px, auto) 更稳妥
• 注意 grid-gap 会额外增加间距，要算进总高度；用 gap 替代老写法更安全

line-height 陷阱：别用它“假装”两行头部

有人把整个 header 写成单个