59、实现：页头在顶部，页脚永远在页面底部

这个题本质上是经典的sticky footer粘性页脚布局。要求是页头始终在顶部主体内容在中间页脚在页面底部当内容不够高时页脚也不能跑到中间要贴到页面最底部但页脚不是 fixed 在窗口底部内容很多时它应该被正常撑到页面最后推荐方案flex布局这是现在最简单、最稳的做法。HTMLbody div classpage header classheader页头/header main classmain主体内容/main footer classfooter页脚/footer /div /bodyCSShtml, body { height: 100%; margin: 0; } .page { min-height: 100vh; display: flex; flex-direction: column; } .header { height: 60px; background: #409eff; color: #fff; } .main { flex: 1; background: #f5f5f5; } .footer { height: 80px; background: #333; color: #fff; }为什么这样能实现关键在这两句.page { min-height: 100vh; display: flex; flex-direction: column; }表示整个页面容器最小高度占满一屏并且纵向排列。然后.main { flex: 1; }意思是主体内容区域自动占据剩余空间。所以如果内容少main会撑开把footer顶到底部如果内容多页面整体会被内容撑高footer会自然出现在内容最后面这正好满足题意。更简洁的写法如果不包.page容器也可以直接让body做布局容器。HTMLbody header页头/header main主体内容/main footer页脚/footer /bodyCSShtml, body { height: 100%; margin: 0; } body { min-height: 100vh; display: flex; flex-direction: column; } main { flex: 1; }面试回答可以这么说这题可以用 Flex 布局实现 sticky footer。让页面最外层容器设置min-height: 100vh并使用display: flex; flex-direction: column;。再让主体内容区域设置flex: 1占满剩余空间。这样当内容不足一屏时主体会自动撑开把页脚顶到页面底部当内容很多时页脚会自然出现在内容之后而不是固定在窗口底部。完整可运行示例!DOCTYPE html html langen head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / titlesticky footer/title style html, body { margin: 0; height: 100%; } .page { min-height: 100vh; display: flex; flex-direction: column; } .header { height: 60px; line-height: 60px; text-align: center; background: #409eff; color: white; } .main { flex: 1; padding: 20px; background: #f5f5f5; } .footer { height: 80px; line-height: 80px; text-align: center; background: #333; color: white; } /style /head body div classpage header classheader页头/header main classmain 主体内容 /main footer classfooter页脚/footer /div /body /html如果面试官追问为什么不能用position: fixed因为题目要求的是页脚永远在页面底部不是窗口底部而fixed是固定在浏览器视口底部会一直悬浮在页面上不符合题意。旧方案绝对定位 padding/margin 预留以前也有人这么写但不如flex好维护。例如html, body { height: 100%; margin: 0; } .page { min-height: 100%; position: relative; padding-bottom: 80px; /* 预留 footer 高度 */ box-sizing: border-box; } .footer { position: absolute; left: 0; bottom: 0; width: 100%; height: 80px; }这个方案的问题是必须知道 footer 高度维护成本高容易重叠所以现代写法优先flex。最终推荐答案body div classpage headerHeader/header mainMain Content/main footerFooter/footer /div /bodyhtml, body { margin: 0; height: 100%; } .page { min-height: 100vh; display: flex; flex-direction: column; } main { flex: 1; }