目录
前言布局的情况讨论内容显示小于屏幕高度内容显示超过屏幕高度出现滚动条代码实现效果前言
在显示网站的ICP备案信息时，我们希望ICP备案信息永远在最下面，但是当页面数据过多出现滚动条时，ICP备案信息也在最下面，而不是浮动在屏幕的底部布局的情况讨论
内容显示小于屏幕高度
如果我们采用flow流布局，直接把ICP信息放在div下面，当上层div高度很小时，ICP就会显示在中间
内容显示超过屏幕高度出现滚动条
如果我们用fixed将ICP固定那么就会出现底部显示的信息覆盖了内容
代码实现
为了兼容以上两种情况，我们使用
flex设计布局框架
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>html {height: 100%;}body {height: 100%;margin: 0px;overflow: hidden;}.page {display: flex;flex-direction: column;height: 100%;overflow: auto;}.content {display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;flex: 1;background-color: #2b85e4;}.content-sub {width: 100%;height: 2000px;background-color: #baffa4;}.foot {text-align: center;padding: 10px;background-color: #7ed321;}</style></head><body><div class="page"><div class="content">内容显示，无论高度是多少，ICP备案信息都将显示在最下方<div class="content-sub">填充块</div></div><div class="foot">ICP备案信息</div></div></body></html>
上面的代码可以自行创建html运行测试，通过审核元素动态的调整content-sub元素的高度
