Html iOS7中带有固定页眉和页脚的网页上的滚动问题
这对我来说很难解释，但我会尝试： 首先，我的网页是在iOS6.x、Android、W7和桌面浏览器IE9、Safari和Chrome中使用mobilebrowser。问题发生在iOS7中的苹果移动Safari浏览器中。我有一个粘脚和虚拟键盘的问题，但问题解决了 现在我在页面上滚动时出现问题。向下滚动时，通常导航栏将隐藏，而地址栏将在iOS7上收缩。这种情况不会发生。固定页眉和页脚之间的内容是滚动的，但内容的底部与页脚和导航栏重叠。我必须等待滚动停止，然后才能再次向下滚动。然后地址栏将缩小，导航栏将隐藏，底部内容将显示。当我在页面底部想要向上滚动时，同样的事情也会发生，只是向上：滚动到顶部，标题和微小的地址栏与上面的内容重叠，等待滚动停止，然后再次滚动，地址栏展开，导航栏显示，上面的内容显示。 希望这张图片能帮助： 以下是一些css代码：Html iOS7中带有固定页眉和页脚的网页上的滚动问题,html,css,browser,ios7,iphone-web-app,Html,Css,Browser,Ios7,Iphone Web App,这对我来说很难解释，但我会尝试： 首先，我的网页是在iOS6.x、Android、W7和桌面浏览器IE9、Safari和Chrome中使用mobilebrowser。问题发生在iOS7中的苹果移动Safari浏览器中。我有一个粘脚和虚拟键盘的问题，但问题解决了 现在我在页面上滚动时出现问题。向下滚动时，通常导航栏将隐藏，而地址栏将在iOS7上收缩。这种情况不会发生。固定页眉和页脚之间的内容是滚动的，但内容的底部与页脚和导航栏重叠。我必须等待滚动停止，然后才能再次向下滚动。然后地址栏将缩小，导航栏
*
{
margin: 0; padding: 0;
-webkit-tap-highlight-color: rgba(0,0,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, #206493, #2375ae, #2785c7 85%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #206493, #2375ae, #2785c7 85%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #206493, #2375ae, #2785c7 85%); /* IE10+ */
background: linear-gradient(top, #206493, #2375ae, #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, #999, #666 2%, #222); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #999, #666 2%, #222); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #999, #666 2%, #222); /* IE10+ */
background: linear-gradient(top, #999, #666 2%, #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>
<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>
标题
$（函数（）{
$（'input[placeholder]，textarea[placeholder]）.placeholder（）；
});
名称
...
...
...
在iPad上，如果文档正文设置为100%高度，则内容在横向模式下会向上移动20像素。这可以通过在OrientionChange事件上调用window.scrollTo（0，0）来解决
你可以看看这个博客，它提到了IOS7中的后备功能，所以我的问题的答案是，我必须等待苹果来修复这个和100个其他东西？不，这个问题有一个黑客补丁，你可以使用
窗口。当你登陆横向模式时，滚动到（0,0）20px