如何实现Web应用页脚：内容短时显屏底，长时需滚动可见？

这正是前端里经典的**粘性页脚（sticky footer）**需求，我给你提供两种纯CSS实现方案，完美适配你说的两种场景——内容不足时页脚固定在屏幕底部，内容过长时随页面滚动到底部，完全不用写JS：

方案1：现代Flex布局（推荐） #

这个方案简洁灵活，兼容性覆盖绝大多数现代浏览器，不需要固定页脚高度：

HTML结构 #

<body>
  <div class="page-container">
    <header>你的页面头部</header>
    <main class="page-content">这里是页面的主要内容区域</main>
    <footer>你的全局页脚</footer>
  </div>
</body>

CSS代码 #

/* 先重置默认的边距和盒模型，避免浏览器默认样式干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  /* 让body至少占满整个屏幕的高度 */
  min-height: 100vh;
  /* 使用flex布局，垂直排列子元素 */
  display: flex;
  flex-direction: column;
}

.page-content {
  /* 让内容区域自动填充body的剩余空间，把页脚挤到最底部 */
  flex: 1;
  /* 可根据需求添加内边距，避免内容贴边 */
  padding: 1.5rem;
}

footer {
  /* 这里自定义你的页脚样式即可 */
  background-color: #f0f0f0;
  padding: 1rem;
  text-align: center;
  border-top: 1px solid #ddd;
}

原理说明 #

• 当页面内容高度小于屏幕高度时，flex: 1会让.page-content自动占满body的剩余空间，页脚自然被推到屏幕底部；
• 当内容高度超过屏幕高度时，body会被内容撑开，页脚就会跟在内容的下方，需要滚动页面才能看到，完全符合你的需求。

方案2：兼容旧浏览器的传统方案 #

如果需要兼容不支持Flex布局的旧浏览器（比如IE9及以下），可以用这个固定高度的方案：

HTML结构 #

<body>
  <div class="wrapper">
    <header>你的页面头部</header>
    <div class="page-content">这里是页面的主要内容区域</div>
    <!-- 这个push元素用来占位，抵消footer的负边距 -->
    <div class="push"></div>
  </div>
  <footer>你的全局页脚</footer>
</body>

CSS代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

.wrapper {
  /* 让容器至少占满屏幕高度 */
  min-height: 100%;
  /* 负值等于footer的高度，用来抵消footer的高度 */
  margin-bottom: -60px;
}

.page-content {
  /* 防止内容被footer覆盖，值等于footer的高度 */
  padding-bottom: 60px;
  padding: 1.5rem;
}

.push {
  /* 高度等于footer的高度，填充占位 */
  height: 60px;
}

footer {
  /* 固定footer的高度 */
  height: 60px;
  background-color: #f0f0f0;
  padding: 1rem;
  text-align: center;
  border-top: 1px solid #ddd;
}

原理说明 #

通过给.wrapper设置负的margin-bottom抵消footer的高度，再用.push元素填充对应的高度，确保内容不会被footer遮挡。当内容不足时，页脚会固定在屏幕底部；内容过长时，整个页面被撑开，页脚跟随内容到底部。

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