這兩天做專案，在對移動端前端頁面做頁面高度自適應固定時遇到了問題，顯示效果是：整個頁面為一個整體，上半部分顯示地圖，下半部分顯示對應的駕校班型（我們是做駕校產品的），地圖沒有上間距，和班型下間距1-2個rem，班型和底部按鈕間距為1-2rem，適應於不同手機和不同大小尺寸。

    除錯了半天，老是出現問題：在自己手機上好好的，一到ios上不是高度差點，就是底部樣式間距太大；好不容易調好了ios，但是在自己手機顯示又亂了.......哎，對於不是多熟悉前端的我來說，頭很痛.....在網上也查看了一些資料，也沒有達到效果；最後痛定思痛，看著頁面仔細的琢磨了琢磨，有了一個解決的方法——

大概思路：（定位）

1. 當前頁面（body主體）為一個整體，為其新增兩個div（假設名稱分別為：map,business），一個用於控制地圖，一個用於控制服務班型顯示（底部按鈕是固定好的，不用動）

2. 為了子元素能夠有效的使用百分比，給html和body的height設定百分比：html,body{width:100%;height:100%}，基於瀏覽器的解析規則。然後定義一個相對定位：{position:relative;}

3. 調整好為business的這個div內部內容顯示樣式，然後開始定位：使用position:absolute;絕對定位。底部按鈕總高度＋間距高度＝最終。

4. 使用相同的思路，再來調整地圖的顯示，同樣使用定位：position:absolute;絕對定位。底部按鈕高度＋服務班型高度＋實際需要間隔的間距高度＝ 最終。

5.服務班型（business）和底部按鈕的間隔固定了，地圖（map）和服務班型間距固定了。（開始是使用的百分比來匹配的，老是出現間距不統一）。兩個最外面控制地圖和服務班型的間距顯示的樣式固定好了，剩下的就是內部內容高度顯示了，這時候可以使用百分比來進行佈局了（前提是父元素需要是百分比，也可以使用指定的rem）。在對外（business和map）div上設定一個overflow:hidden。就OK了！

具體程式碼：

 html,body{width:100%;height:100%;position:relative;}

.map{width:100%;overflow:hidden;position:absolute;bottom:18rem;}

.map .map_child{width:100%;height:28rem;}

.business{width:100%;overflow:hidden;position:absolute:bottom:5rem;}

這只是簡單的幾句css樣式程式碼，效果是實現了，我想肯定不是最好的解決方法。

寫這篇博文：一是為了總結，二也是拋專引玉，如果有哪位朋友看了此博文，有更好的實現方式，還請多評論留言！

相互學習和進步！