文章详情页

css3 - 页面布局问题

浏览：48日期：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. base64_decode调用出错windows server 2008R2系统上出现的2. mysql建表索引问题求助3. mysql 5万张表导出成sql 不要内容，只要结构，非常慢。如何解决啊？4. 为什么我按老师讲的浏览器里输出了peter.老师的却没有？5. java - MySQL显示中文星期6. 老师可以把数据库也给我们吗7. MySQL 联合查询并更新到另一个表，求教8. 求一个mySQL安装包9. mysql - 多张表不同记录的字段合并到一条记录里。10. vue打包和PHP后台怎样同域名部署配置

排行榜

					
					javascript - vue提示语法错误，请问错误在哪？
老师可以把数据库也给我们吗
angular.js - angularjs实现点击事件后,在firefox生效却在360浏览器不起作用
jquery - js文件被多次加载问题
angular.js - Beego 与 AngularJS的模板格式冲突，该怎么解决？
vue打包和PHP后台怎样同域名部署配置
java - 新人用直接springmvc还是springboot
angular.js - 使用angular route的时候，页面切换会暂时性出现一段空白，然后内容才加载出来
javascript - 给页面加了动画，在微信浏览器中显示混乱，急救
css - 需求是input的输入，select自动展开状态，动态查询用ng-click解决，如何做input和select自动展开呢？
javascript - <input type="file">取消选择时如何保留上次选择的文件
				

热门标签