1、先贴上页面代码，可以在#content添加内容，内容多或少，#footer页脚始终都会处于页面底部。<body媪青怍牙> <div id="Container"> <div id="header">header</div> <div id="content">body</div> <div id="footer">footer</div> </div> <style> *{ margin:0; padding:0; } #Container{ display: flex; min-height: 100vh; flex-direction: column; border:2px solid #fff3cd; } #header{ min-height: 50px; border:2px solid #1c7430; } #content{ flex: 1; border:2px solid #f5c6cb; } #footer{ min-height: 50px; border:2px solid #fd7e14; } </style></body>
2、看看效果
3、flex属于css3样式，主流浏览器新版本基本都支持，有使用疑惑的可以网上搜，很多。亲测，手写，如果对你有用就点个赞吧！