文章详情页

css3 - 页面布局问题

更多 QQ空间微信 QQ好友腾讯朋友复制链接

【字号：大中小】日期：2023-07-07 16:05:08浏览：46作者：猪猪

问题描述

在手机APP端如何设置头和尾不变，当滑动中间的内容时头和尾不会随着滑动

问题解答

回答1：

position:fixed;

回答2：

除了position:fixed，不要忘了给body添加padding-top和padding-bottom来去除因为fixed产生的内容不正常显示问题

回答3：

position:stickysticky polyfill: https://github.com/wilddeer/s...

回答4：

用position:fixed解决，然后body要添加padding-top，padding-bottom样式，不然的话中间内容部分会有一部分被头部尾部盖住。

回答5：

position:fixed可以解决问题，但是安卓下会出现bug，完美的解决方案应该是避开fixed

<!DOCTYPE html><html><head> <title>布局</title> <meta http-equiv='Content-Type' content='text/html; charset=utf-8'> <meta name='viewport' content='initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' /> <style type='text/css'>*{margin:0;padding:0;font-size: 2vw;color: #fff;}.top{ height: 50px; background: #f00; position: relative;}.mean{ height: auto; background: #095fb6; position: absolute; top: 50px; bottom:50px; left: 0; right: 0; overflow-x: hidden; overflow-y: auto;}.bottom{ height: 50px; background: #ccc; position: absolute; bottom: 0px; left: 0px; right: 0px;} </style></head><body> 我是文字 0000 我是文字</body></html>回答6：

大家说的都很好完美来学习的哈哈

CSS

上一条：web - css3 @keyframes用一次后面的任何样式就解析不了了.下一条：css3 - selected添加 border???

相关文章：

1. 提示我模板文件不存在： tp5 application index view body.html2. HTML5怎么访问本地文件？3. javascript - 这种上传图片预览怎么做？4. javascript - input输入框触发change事件后，外部元素会被选中5. javascript - js判断一个数组是否重复6. javascript - vue2.0中router.repalce跟router.push有什么区别，二者的应用场景是会有怎样的区别？7. python相关问题求解决，有偿8. javascript - 把字符串日期转换成一般时间格式后，发现小于10的数字不会自动添加0在前面，如下9. javascript - prismplayer播放器全屏问题10. javascript - 在sublime中如何给.vue文件注释？

排行榜

					
					git忽略文件，.java文件怎么没被忽略？.gitignore文件怎么看？
node.js - 如何调用hexo渲染 ``` ``` 代码块的渲染引擎
nginx - ssl加密访问证书不受信任
提示我模板文件不存在：  tp5  application  index  view  body.html
javascript - 这种上传图片预览怎么做？
nginx - php-fpm更改默认端口后无法启动
python相关问题求解决，有偿
angular.js - 有谁知道吗用ng-bind-html绑定html。但是html却被转义了
java - 技术书籍中的`idiom`是如何翻译的?
javascript - vue2.0中router.repalce跟router.push有什么区别，二者的应用场景是会有怎样的区别？
javascript - prismplayer播放器全屏问题
				

热门标签