纯CSS解决iOS下网页不满一屏header、footer随页面滚动问题
原创纯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的情况，完全可以尝试
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。