移动端布局规范-固定页头页尾-中间随高度滑动

<!DOCTYPE html>
<html>
<head><title>移动端上下固定中间滑动</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=0"> <style type="text/css">html,body{height: 100%;}body{margin: 0;padding: 0;}#container{display: flex;flex-direction:column;background: #f0debf; }#container .setheader,#container .setFoorter{position: fixed;background: #0089ee;width: 100%;height: 3rem;line-height: 3rem;}#container .headernav,#container .footernav{text-align: center;font-size: 1.5rem;display: block;color: #fff;}#container .setheader{top: 0;}#container .setContain{flex: 1;overflow: scroll;}#container .itembox{font-size: 1.5rem;}#container .setFoorter{bottom: 0;}</style>
</head>
<body><!-- 整体框架 --><div id="container"><!-- 固定头部 --><header id="header" class="setheader"><div class="headernav">头顶到天了</div></header><!-- 中间滑动 --><section id="sectionbox" class="setContain"><div class="itembox"><ul><li>我们不一样~~~~~~</li><li>努力吧！少年~~~~~~</li><li>努力吧！少年~~~~~~</li><li>努力吧！少年~~~~~~</li><li>努力吧！少年~~~~~~</li><li>努力吧！少年~~~~~~</li><li>努力吧！少年~~~~~~</li><li>努力吧！少年~~~~~~</li><li>努力吧！少年~~~~~~</li><li>努力吧！少年~~~~~~</li><li>努力吧！少年~~~~~~</li><li>努力吧！少年~~~~~~</li><li>努力吧！少年~~~~~~</li><li>努力吧！少年~~~~~~</li><li>努力吧！少年~~~~~~</li><li>努力吧！少年~~~~~~</li><li>努力吧！少年~~~~~~</li><li>努力吧！少年~~~~~~</li><li>努力吧！少年~~~~~~</li><li>努力吧！少年~~~~~~</li><li>努力吧！少年~~~~~~</li><li>努力吧！少年~~~~~~</li><li>努力吧！少年~~~~~~</li><li>努力吧！少年~~~~~~</li><li>努力吧！少年~~~~~~</li><li>努力吧！少年~~~~~~</li><li>努力吧！少年~~~~~~</li><li>努力吧！少年~~~~~~</li><li>努力吧！少年~~~~~~</li><li>努力吧！少年~~~~~~</li><li>努力吧！少年~~~~~~</li><li>努力吧！少年~~~~~~</li><li>努力吧！少年~~~~~~</li><li>有啥不一样！少年~~~~~~</li></ul></div></section><!-- 固定页尾 --><footer class="setFoorter"><div class="footernav">底部导航</div></footer></div><script type="text/javascript"><!-- 移动端使用rem响应不同屏幕布局 -->//通过window.screen.width获取屏幕的宽度var winWidth=window.screen.width / 30;document.getElementsByTagName('html')[0].style.fontSize=winWidth+'px';// 根据导航栏高度设置文本上下间距var headerHight = document.getElementById('header').offsetHeight;console.log('获取页头高度',headerHight);document.getElementById('sectionbox').style.paddingTop=headerHight/1.2+'px';
        document.getElementById('sectionbox').style.paddingBottom=headerHight/1.2+'px';</script>
</body>
</html>

转载于:https://www.cnblogs.com/longly/p/10847471.html

移动端布局规范-固定页头页尾-中间随高度滑动相关推荐

Android复习06【网络编程提高篇-安装GsonFormat、HttpUrlConnection封装、线程池、GsonFormat解析Json、自动加载下一页、自定义组件、页头页尾刷新、侧滑删除】
2020-04-07 星期二 [第8周] [考试不考...] 目录思维导图安装GsonFormat插件添加网络访问权限 GitHub---HttpUrlConnection封装线程池 G ...
html转word 页头页脚代码示例
文章目录原版word代码使用的插件是jQuery-WordExport.js来加页头页脚原版word代码方便理解 <html xmlns:v="urn:schemas-micr ...
Lodop分页打印每页显示页头页尾
Lodop分页打印页头页尾问题 1. Lodop页头页尾打印标签 1.1 caption标签:caption标签的内容只显示在首页 1.2 thead标签: 页头标签, 此标签的内容为页头, 显示在每 ...
html静态页面引入公用组件, 开启SSI配置使shtml支持include公用的页头页脚
转自 : http://www.phpvar.com/archives/3278.html 这是文章是为了实现前端人员编写编写项目众多静态文件时,能像php等开发语言一样使用include将页面公有的 ...
STM32F407ZG 串口通信+固定帧头帧尾传输数据帧
STM32F407ZG开发板学习(4) 串口简介通信接口 USART 接线电平标准数据帧实验:固定帧头帧尾数据传输需求最终思路以及思考过程思路中断函数程序段长度的问题缓冲区数据结构的 ...
上下定高中间自适应_移动端布局上下固定中间自适应
第五步:完整代码百度经验 *{ margin: 0; padding: 0; } html,body{height:100%;} body{ font-family: 微软雅黑; backgroun ...
移动端通用元件库+app通用元件库+数据展示+操作反馈+通用模板+数据录入+列表页+表单页+详情页+通用版布局+移动端手机模板+业务组件+反馈组件+展示组件+表单组件+导航组件
移动端通用元件库+app通用元件库+数据展示+操作反馈+通用模板+数据录入+列表页+表单页+详情页+通用版布局+移动端手机模板+业务组件+反馈组件+展示组件+表单组件+导航组件原型展示及下载地址:h ...
Axure通用web端元件库rplib文件格式+移动端app通用元件库rplib文件格式+电脑端动态可视化图表元件库+数据展示+操作反馈+通用模板+数据录入+列表页+表单页+详情页+通用版布局
作品介绍:Axure通用web端元件库rplib文件格式+移动端app通用元件库rplib文件格式+电脑端动态可视化图表元件库+数据展示+操作反馈+通用模板+数据录入+列表页+表单页+详情页+通用版布 ...
Excel2013打印时怎么固定表头及表尾让打印后的每页都可以看得到
在打印表格的过程中,想必大家会遇到这样的问题,就是当表格特别大时,而且只有首页有表头,其他页都没有,这样就算打印出来也不利于查看,因为并不是每一页都有表头.有什么方法可以将表头固定起来,在打印之后每页 ...

移动端布局规范-固定页头页尾-中间随高度滑动

移动端布局规范-固定页头页尾-中间随高度滑动相关推荐

最新文章

热门文章