要让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布局 (最推荐) 这种方法的核心思想是将
<body>
（或一个主容器）设置为Flex容器，并让主要内容区域占据剩余空间，从而将页脚推到底部。
固定页脚示例 - Flexbox <body>
网站头部
这是主要内容区域。如果内容很少，页脚也会固定在底部。
立即学习“前端免费学习笔记（深入）”；
