纯CSS解决iOS下网页不满一屏header、footer随页面滚动问题打赏
前端页面开发或是现在日渐增多的Hybird APP应用开发中，经常遇到模拟原生APP界面效果不佳情况，固定header、footer便是其中一种。
涉及header、footer固定，主体部分可滑动，最初想法一般是
position: fixed
然而，iOS各种下input获取焦点后fixed失效等一系列问题，致使我们不得不选择另辟他径。于是，我们这样玩
* {
box-sizing: border-box;
margin: 0;
}
html, body, #app {
height: 100%;
}
body {
-webkit-overflow-scrolling: touch;
}
.header,
.footer {
position: absolute;
left: 0;
right: 0;
height: 50px;
z-index: 100;
}
.header {
top: 0;
background: #ff910f;
}
.footer {
bottom: 0;
background: #f3f3f3;
}
.content {
padding: 50px 0;
overflow: auto;
height: 100%;
}
似乎是很不错的选择，很多移动端网站以及Hybird APP也都在这样用。然而，还有很多网站或是Hybird APP还是选择了IScroll之类的三方库来模拟，不得不承认的是，类似IScroll使用CSS3来模拟iOS的Bounce效果，很不错，但有时候我们可能不希望使用IScroll这样的库，譬如，只是一个简单的活动页等。这个情况下，我们使用如上结构，似乎可以满足，然而，实际使用中发现，如果网页低于一屏高，header、footer还是会被“带走”，这个情况下，有人建议使用js来阻止body的touch事件，这样由于主要滑动的是.content下面的内容，也不至于整页滑动导致header、footer随滚动而动，但这么暴力的处理往往是不理想的（可能影响其他功能，且页面功能多时，可能出现js加载延迟，页面初始化完第一次还是可以滚动）。
效果大概是这样的：
期望是只有主体部分能够滚动，然而
向上滑动
向下滑动
最近遇到这样的问题，尝试后做了如下小改动，可以零js解决此问题，示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>Title</title>
<style>
* {
box-sizing: border-box;
margin: 0;
}
html, body, #app {
height: 100%;
}
body {
-webkit-overflow-scrolling: touch;
}
.header,
.footer {
position: absolute;
left: 0;
right: 0;
height: 50px;
z-index: 100;
}
.header {
top: 0;
background: #ff910f;
}
.footer {
bottom: 0;
background: #f3f3f3;
}
.content {
position: relative;
padding: 50px 0;
overflow: auto;
height: 100%;
}
.content > .scroll-wrap {
box-sizing: content-box;
min-height: 100%;
padding-bottom: 1px;
}
</style>
</head>
<body>
<div id="app">
<div class="header">测试Header</div>
<div class="content">
<div class="scroll-wrap">
主体
</div>
</div>
<div class="footer">测试Footer</div>
</div>
</body>
</html>
很简单，既然js实现可能滞后生效（首次不生效）又可能冲突，那么我们就在css中动点手脚，在.content下加一层min-height为100%+1px的块，如下：
.content > .scroll-wrap {
box-sizing: content-box;
min-height: 100%;
padding-bottom: 1px;
}
浏览器解析的时候始终会认为需要滚动条，而不会触发整个页面的Bounce效果，尝试多个iOS系统，基本没有什么问题，只是1px的差异，遇到处女座可能有点纠结了。
PS：这个方法最终没有用到自己的项目上，因为自己项目是一个动态构建webapp的平台，组件都是第三方开发的，可能会有高度100%的需求，且不希望使用CSS3的vh等来实现全屏高，所以希望主体部分下元素可以继承主体高度，设置min-height后似乎并不合适。但纯粹自己开发网站、Hybird APP的情况，完全可以尝试
- 固定链接：https://www.poorren.com/pure-css-solve-ios-page-header-footer-scrolling-with-the-page
- 文章标签：android，APP，footer，header，Hybird，Hybird APP，iOS，网页
- 扫二维码：纯CSS解决iOS下网页不满一屏header、footer随页面滚动问题
- 版权所有：除"转载分享"分类外，未经注明，均为原创、整理，转载请注明出处。
果然是大佬，下次遇到这种问题就不怕了
现在都是厉害的人物，感谢分享
博客文章很受欢迎啊，有的访问量都是达2000多，评论也有几十个。
另外问下博主：你的这个主题还不错，不知能否分享，如果能指点下哪里可以下载，十分感谢。。。。。
大家好
现在的技术大神越来越多了，很多问题都能逐一解决，谢谢分享
都是大触，厉害厉害