易笔记易笔记
首页
文章
分类
标签
首页
文章
分类
标签
AI 1GitHub 1开源 1游戏开发 1Claude Code 1工作流 1AI 编程 1效率工具 1LangChain 1Prompt 1Frontend 1cesium 2CSS 10iOS 1Safari 1css 1font 1typography 1ide 1Flexbox 1JS 3ThreeJS 23D 2PHP 1Vue 8Windows 4KMS 1Vue3 5uni-app 1Form 1Modal 1虚拟滚动 1Vue 3 1Composition API 1ref 1reactive 1美食 1空气炸锅 1烤鱼 1减脂餐 1JavaScript 1浏览器 API 1requestIdleCallback 1性能优化 2组件 1异步组件 1
固定头尾布局

核心逻辑 (Pseudo-code)

Layout:
  Container:
    height: 100vh          # 视口高度
    display: flex-column   # 垂直弹性布局

  Item(Header):
    height: fixed          # 固定高度
    shrink: 0              # 禁止压缩

  Item(Content):
    grow: 1                # 占满剩余空间
    overflow-y: scroll     # 内容滚动

  Item(Footer):
    height: fixed          # 固定高度
    shrink: 0              # 禁止压缩
分类: Layout标签: CSS, Flexbox
日期: 12/18/2025