關於微信公衆號內嵌H5遇到的底部定位Fixed出現錯位的情況

.main {
	display: block;
	overflow: auto;
	height: 100%;
	padding: 0.86rem 0 1.14rem 0;
	-webkit-overflow-scrolling: touch;
}

<section class="uploadPhoto main">
	<div class="main_inner">
	    <!--滾動內容區-->
	</div>
</section>

<div class="footerMenu">
	<!--底部內容-->	
</div>

這時候的底部雖然會定位在底部，但是當滑動到底部後，會造成 .footerMenu 出現fixed定位錯位， .footerMenu將不會在定位在底部。因爲 .main 已經設置了100%又設置了padding，造成內容超出，所以出現這問題，那麼如何解決呢？

.main {
	display: block;
	overflow: auto;
	height: 100%;
	/*padding: 0.86rem 0 1.14rem 0;*/
	-webkit-overflow-scrolling: touch;
}
/*消除滾動條*/
.main::-webkit-scrollbar{
    width: 0;
    height: 0;
}
.main .main_inner {
	padding: 0.86rem 0 1.14rem 0;
}

如果 .main 設置的padding改成 .main_inner 設置padding，那麼自然就解決了，順便一提

在移動端iOSH5頁面中的滾動有可能會初心卡頓的現象，那麼上文中的

{
    -webkit-overflow-scrolling: touch;
}

就是用於解決卡頓的問題，實現了回彈