css使页脚始终居于页面底部

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样式，主流浏览器新版本基本都支持，有使用疑惑的可以网上搜，很多。亲测，手写，如果对你有用就点个赞吧！