当页面内容全部占满时,滑动到最下面,显示footer在底部;
当页面内容不满时,footer也是在最底部显示。
具体实现代码如下:
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>* {margin: 0;padding: 0;}html,body {height: 100%;}.page {display: flex;flex-direction: column;height: 100%;}header {background: green;flex: 0 0 auto;}.content {background: #ccc;flex: 1 0 auto;}footer {background: green;flex: 0 0 auto;}</style></head><body><body><div class="page"><header> 头部 </header><div class="content">这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!这是内容区域!!</div><footer> 底部 </footer></div></body></body>
</html>