要让html页脚始终保持在页面底部，推荐使用flexbox或css grid布局。1. 使用flexbox：将html和body设置为高度100%，display:flex并flex-direction:column，main设置flex:1以占据剩余空间，从而将footer推至底部；2. 使用css grid：body设置display:grid和grid-template-rows:auto 1fr auto，header、main、footer分别对应三行，main的1fr自动填充中间空间；3. position:fixed仅适用于页脚需始终可见的特殊情况，但会覆盖内容，需配合z-index和底部padding使用。上述方法中flexbox和grid能自适应内容高度，确保页脚在内容少时位于视口底、内容多时紧随其后，是更优雅可靠的解决方案。
让HTML页脚始终保持在页面底部，即使内容不足以撑满整个视口，通常可以通过CSS的布局技术来实现。这主要涉及两种情况：一是页脚固定在视口底部（fixed），二是页脚在内容结束后紧贴页面底部（sticky或通过Flexbox/Grid布局）。最常用且推荐的方式是使用Flexbox或CSS Grid来构建整体页面布局，确保页脚自然地“沉”到底部。
要让页脚稳稳地待在页面底部，我个人最推荐也觉得最靠谱的方案是采用CSS Flexbox或CSS Grid布局。它们能优雅地处理内容不足以撑满屏幕时页脚上浮的问题，也能在内容溢出时让页脚自然地跟随内容。
方法一：使用Flexbox布局 (最推荐) 这种方法的核心思想是将
（或一个主容器）设置为Flex容器，并让主要内容区域占据剩余空间，从而将页脚推到底部。
固定页脚示例 - Flexbox
网站头部
这是主要内容区域。如果内容很少，页脚也会固定在底部。
立即学习“前端免费学习笔记（深入）”；
方法二：使用CSS Grid布局 Grid布局提供了一种更强大的二维布局能力，同样能轻松实现页脚固定。
固定页脚示例 - Grid
网站头部
这是主要内容区域。即使内容很少，页脚也会固定在底部。
方法三：使用position: fixed
(特殊情况)
这种方法会将页脚从文档流中移除，并固定在视口底部。它适用于页脚需要始终可见，不随页面滚动的情况。但需要注意，它会覆盖页面内容，且不适合内容溢出时页脚仍在最底部的情况。我个人觉得这种方式用得少，因为大多数时候我们希望页脚在内容之后，而不是浮在内容之上。但如果你真的需要一个“粘在屏幕底部的页脚”，这确实是它的归宿。
footer {
position: fixed; /* 固定定位 */
bottom: 0; /* 距离视口底部0 */
left: 0; /* 距离视口左侧0 */
width: 100%; /* 宽度占满 */
background-color: #333;
color: white;
padding: 20px;
text-align: center;
z-index: 1000; /* 确保在其他内容之上 */
}
/* 重要的是，你需要为body或内容区域底部留出空间，防止内容被 
