文章详情页

css3 - 页面布局问题

浏览：111日期：2023-07-07 16:05:08

问题描述

在手机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. 求大神帮我看看是哪里写错了感谢细心解答2. javascript - JS设置Video视频对象的currentTime时出现了问题,IE,Edge,火狐,都可以设置,反而chrom却...3. css3 - [CSS] 动画效果 3D翻转bug4. php自学从哪里开始？5. javascript - 数组原声方法中的一段代码6. html - eclipse 标签错误7. 数据库 - MySQL 单表500W+数据，查询超时，如何优化呢？8. 网页爬虫 - python爬虫翻页问题，请问各位大神我这段代码怎样翻页，还有价格要登陆后才能看到，应该怎么解决9. phpstady在win10上运行10. python - from ..xxxx import xxxx到底是什么意思呢?

排行榜

					
					phpstady在win10上运行
angular.js - angularjs中的$compile怎么理解？
网页爬虫 - python爬虫翻页问题，请问各位大神我这段代码怎样翻页，还有价格要登陆后才能看到，应该怎么解决
angular.js - 全站用的angular，但是像下面描述的这样强交互的功能用angular该用什么思路去做呢？
css - ionic中的栅格布局如何让文字内容多少不同的每一列中的内容都能垂直居中？
angular.js - angularjs ng-class指令改变ng-click点击的class属性失效
求大神帮我看看是哪里写错了  感谢细心解答
angular.js - angular js点击按钮隐藏选中元素
python - from ..xxxx import xxxx到底是什么意思呢?
java - springboot 修改默认静态资源文件读取路径
php自学从哪里开始？
				

热门标签