大佬教程收集整理的这篇文章主要介绍了html – 在iOS7中使用固定页眉和页脚在网页上滚动问题,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
现在我在页面上滚动时遇到问题.向下滚动时,通常导航栏将隐藏,地址栏将在iOS7上缩小.这不会发生.固定页眉和页脚之间的内容是滚动,但内容的底部与页脚和导航栏重叠.在我再次向下滚动之前,我要等待滚动停止.然后地址栏将缩小,导航栏将隐藏,底部内容将显示.当我在页面底部并想要向上滚动时,同样的事情发生,只是向上:滚动到顶部,标题和小地址栏重叠上部内容,等待滚动停止,然后再次滚动以显示地址栏,显示导航栏和显示的上部内容.
希望这张图片有所帮助:
以下是一些css代码:
* { margin: 0; padding: 0; -webkit-tap-highlight-color: rgba(0,0); } html,body { height: 100%; margin: 0; } body{ font-family: Helvetica,Segoe UI,Arial,Sans-Serif; font-size: 130%; background-image: url('../images/background.png'); background-repeat:repeat; overflow:hidden; } #header { text-align: center; color:#FFF; height: 45px; position:fixed; z-index:5; top:0px; width:100%; top:0; left:0; padding:0; background-color:#2785c7; /* Old browsers */ background: -moz-linear-gradient(top,#206493,#2375ae,#2785c7 85%); /* FF3.6+ */ background: -webkit-linear-gradient(top,#2785c7 85%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top,#2785c7 85%); /* Opera 11.10+ */ background: -ms-linear-gradient(top,#2785c7 85%); /* IE10+ */ background: linear-gradient(top,#2785c7 85%); /* W3C */ background: -webkit-gradient(linear,left top,left bottom,from(#206493),to(#2375ae),color-stop(85%,#2785c7)); /* Chrome,Safari4+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#206493',endColorstr='#2785c7',GradientType=0 ); /* IE6-9 */ } #footer{ color:#CCC; height: 48px; position:fixed; z-index:5; bottom:0px; width:100%; padding-left:2px; padding-right:2px; padding:0; border-top:1px solid #444; background:#222; /* Old browsers */ background:-webkit-gradient(linear,0 0,0 100%,color-stop(0,#999),color-stop(0.02,#666),color-stop(1,#222)); background: -moz-linear-gradient(top,#999,#666 2%,#222); /* FF3.6+ */ background: -webkit-linear-gradient(top,#222); /* Chrome10+,#222); /* Opera 11.10+ */ background: -ms-linear-gradient(top,#222); /* IE10+ */ background: linear-gradient(top,#222); /* W3C */ } #footer > div { height:48px; width:52px; color:#AAACAF; text-align:center; font-size:0.55em; display:inline-block; cursor:pointer; } @media screen and (max-width: 350px) /* Mindre skift på mobil enheder */ { #footer > div { width:48px; font-size:0.40em; } } #scroller { /* min-height: 360px;*/ padding-top:45px; padding-bottom:48px; overflow:hidden; width:100%; }
以下是一些HTML:
<html> <head> <title>Title</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0,user-scalable=0,width=device-width,height=device-height"/> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <link rel="apple-touch-icon" href="images/name.png" /> <link rel="apple-touch-startup-image" href="images/startup.png" /> <link rel="shortcut icon" href="/images/name.ico" /> <link href="css/style.css?square=#VERSION" rel="stylesheet" type="text/css" /> <script src="js/jquery-1.6.4.min.js?square=#VERSION" type="text/javascript"></script> <script src="js/jquery.placeholder.js?square=#VERSION" type="text/javascript"></script> <script src="js/javascript.js?square=#VERSION" type="text/javascript"></script> <script src="js/divScroll.js?square=#VERSION" type="text/javascript"></script> <script> $(function() { $('input[placeholder],textarea[placeholder]').placeholder(); }); </script> </head> <body> <form id="Form1" runat="server"> <div id="header" style="line-height:45px;" runat="server"> Name </div> <div id="scroller" > <div id="content"> ... ... ... </div> <div id="footer" style="text-align:center"> <div id="LoginNameLogoDiv"><img alt="Company" src="images/company_logo.png" /></div> </div> </form> </body> </html>
您可以查看此博客,其中提到了IOS7 http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review中的后备内容
以上是大佬教程为你收集整理的html – 在iOS7中使用固定页眉和页脚在网页上滚动问题全部内容,希望文章能够帮你解决html – 在iOS7中使用固定页眉和页脚在网页上滚动问题所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。