需求：实现仅在滚动时显示的Sticky Footer（基于display:table现有方案）

嘿，我完全get到你想要的效果了——就是那种「懂事儿」的Footer：当页面内容不够长时，它稳稳钉在视窗底部；当内容多到需要滚动时，就乖乖被挤到页面最末端，得滚到底才能看到对吧？

你之前用display: table实现的方案虽然能让内容区占满剩余高度，但要实现这种「智能」Footer，用现代的Flexbox或者Grid布局会更简洁直观，而且完美适配页眉/页脚高度不固定的需求，我给你两种方案参考：

方案一：Flexbox 实现（兼容性好，易理解） #

这是最常用的方案，代码清晰，适配绝大多数场景：

<body>
  <header>这里是高度不固定的页眉<br>可以有多行内容哦</header>
  <main>
    这里是内容区<br>
    内容少的时候，我会自动拉伸填满剩余空间，把Footer推到视窗底部<br>
    内容多到超过视窗高度时，我会自然撑开，Footer就被挤到页面最下面啦
  </main>
  <footer>这里是高度不固定的页脚<br>同样支持多行内容</footer>
</body>

/* 先给根元素和body设置基础样式 */
html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh; /* 让body至少占满视窗高度 */
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
}

/* 页眉和页脚设置不被压缩 */
header, footer {
  flex-shrink: 0; /* 确保它们的高度由自身内容决定，不会被内容区挤扁 */
  background-color: #f5f5f5;
  padding: 1rem;
}

/* 内容区自动占满剩余空间 */
main {
  flex-grow: 1; /* 吃掉所有剩余空间 */
  padding: 1rem;
}

方案二：Grid 实现（代码更简洁） #

如果你喜欢更简洁的语法，Grid布局一步到位：

<!-- HTML结构和上面完全一样 -->
<body>
  <header>高度不固定的页眉</header>
  <main>内容区</main>
  <footer>高度不固定的页脚</footer>
</body>

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: grid;
  /* 直接定义三行高度：页眉/页脚自动适配内容，内容区占满剩余 */
  grid-template-rows: auto 1fr auto;
}

header, footer {
  background-color: #f5f5f5;
  padding: 1rem;
}

main {
  padding: 1rem;
}

为什么这两种方案更合适？ #

• 完全满足你的需求：内容不足时Footer在视窗底部，内容足够时被推到页面末端
• 页眉和页脚的高度完全由内部内容决定，不需要固定高度
• 代码比display: table更简洁，语义化更好，没有表格布局的冗余嵌套

这两种方案现在的浏览器兼容性都非常好，除了极旧的IE版本（如果你的项目不需要兼容的话），完全可以放心使用。

内容的提问来源于stack exchange，提问作者Idrizi.A