1 概述
需求:
- 把上下两个模块固定如第三张图所示效果,只有中间两个饼图能自由上下滑动;
- 把下面的tab固定好之后,也要把它调整得充满左右两边的空白处,效果如第三张图所示。现在这个效果我是用电子表格的自适应来做的,我已经使它尽量充满两边了,可是在移动端展示时还是会显示不充满。
具体需求:
- 制作移动端的POC页面,顶部显示部分固定在页面顶部,尾部菜单部分固定在页面底部,当上下滑动页面时,只有中间两个饼图仪表能自由滑动。
- 移动端展示时实现下面菜单部分左右充满。效果如图:
实现思路:
- 使用HTML模板布局:见https://history.wiki.smartbi.com.cn/pages/viewpage.action?pageId=21955317
- HTML实现顶部和尾部固定定位,中间内容部分绝对定位。
2 实现步骤
- 准备基础 HTML 模板(下载: demos.html )
2.修改