前言：
首先說一說我昨天天的苦逼經歷。中午吃飯時一同事跟我說，他做的項目嵌套iframe后，子頁面的position設置fixed失效了。
經過反復詢問，得知他用了兩層iframe，再加上最外的父頁面，一共就是三層。
下午就其iframe子頁面固定定位問題進行處理，上網找了各種解決方案：插件、js模擬等效果均不理想。頁面不是代碼過多就是效果卡頓、跳動（附：博主的同事架構的頁面是用於手機微信端，部分PC端的優秀代碼並不適用，非代碼不行）。無奈之下只得另想出路，最終功能完美實現，現拿出來與大家共享。
BUG：
現有父頁面A，子頁面B，B頁面制作了一個底部菜單，設置position:fixed;bottion:0;單獨打開子頁面B，底部菜單始終定位底部，不隨頁面滾動條滾動。在父頁面A中，采用iframe映入頁面B，google瀏覽器打開父頁面A，菜單可以定位底部
；google瀏覽器手機調試模式打開父頁面A，菜單可以定位底部
；Android手機微信打開父頁面A，菜單可以定位底部
；iPhone手機微信打開父頁面A，菜單未定位在頁面底部
，而是始終位於B頁面內容的末尾
。
看到這，博主心都碎了，平時比垃圾還垃圾的Android，今天這么給力，倒是平時牛皮哄哄的iPhone，今天使出了這么大一個絆子。沒辦法，應下來的事，還要想辦法改呀……
iframe原理：
我們首先准備一枝筆及一張A4白紙，這只筆就好比我們的父頁面，白紙好比子頁面。固定住筆並將白紙放於筆下，來回拖動白紙。無論我們怎么拖動，白紙的高度始終都是A4紙張的高度。所以，相對底部的菜單，就永遠在子頁面的底部。
那么，，，如果我們把A4白紙卷起來呢？這時子頁面的高度就不再是A4白紙的高度了，由於底部菜單是定位在子頁面的相對底部，這時底部菜單就位於了A4白紙折疊后高度的最底。
那么，所謂的卷起A4紙，其實就等於給子頁面B一個新的高度，超出部分，用滾動條滾動顯示。
解決方案：
知道了導致問題的原因，接下來就是解決了。
博主的小demo父頁面很簡單，就是最基本的iframe加載頁面
- <style>
- html,body,iframe{margin:0px;padding:0px;border:0px;width:100%;height:100%;}
- #navbar{background:url(http://www.yxccc.com/logo.png) no-repeat left center;}
- </style>
- <iframe src="demo.html" scrolling="No"></iframe>
子頁面被撐起的是一個class為bottom的div
- <style>
- .content{
- <span style="white-space:pre"> </span>overflow:auto;//滾動條就靠它了
- <span style="white-space:pre"> </span>width: 100%;
- <span style="white-space:pre"> </span>position: absolute;
- }
- .bottom{
- <span style="white-space:pre"> </span>position: fixed;
- <span style="white-space:pre"> </span>bottom: 0px;
- <span style="white-space:pre"> </span>width: 100%;
- <span style="white-space:pre"> </span>height: 40px;
- <span style="white-space:pre"> </span>line-height: 40px;
- <span style="white-space:pre"> </span>text-align: center;
- <span style="white-space:pre"> </span>background-color:#eee;
- <span style="white-space:pre"> </span>color: #fff;
- <span style="white-space:pre"> </span>font-size: 14px;
- <span style="white-space:pre"> </span>z-index: 99;
- }
- </style>
- <pre name="code" class="html"><body>
- <div class="content">
- <div>撐起高度的div</div>
- <div class="bottom">菜單</div>
- </div>
- </body>
撐起頁面的代碼，讀者可自行添加
接下來就是兩段很關鍵的js方法了
- /**滾動條高**/
- function getWindowScrollTop(win){
- var scrollTop=0;
- if(win.document.documentElement&&win.document.documentElement.scrollTop){
- scrollTop=win.document.documentElement.scrollTop;
- }else if(win.document.body){
- scrollTop=win.document.body.scrollTop;}return scrollTop;
- }
- return scrollTop;
- }
- /**獲取**/
- function getWindowHeight(win){
- var clientHeight=0;
- if(win.document.body.clientHeight&&win.document.documentElement.clientHeight){
- clientHeight = (win.document.body.clientHeight<win.document.documentElement.clientHeight)?win.document.body.clientHeight:win.document.documentElement.clientHeight;
- }else{
- clientHeight = (win.document.body.clientHeight>win.document.documentElement.clientHeight)?win.document.body.clientHeight:win.document.documentElement.clientHeight;
- }
- return clientHeight;
- }
最后為子頁面附上高度，，使其滾動條顯露出來
- $(function(){
- var H = parseInt(getWindowHeight(top))+parseInt(getWindowScrollTop(top)) - 40;//此處的40是class為bottom的div元素高
- $(".content").css("height",H + "px");
- });
倒入jq插件，至此頁面無論在iphone或android，底部的菜單定位問題都得到了完美解決。代碼簡單好用，博主表示很開心