前端移动端高度自适应例子

这两天做项目，在对移动端前端页面做页面高度自适应固定时遇到了问题，显示效果是：整个页面为一个整体，上半部分显示地图，下半部分显示对应的驾校班型，地图没有上间距，和班型下间距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样式代码，效果是实现了，我想肯定不是最好的解决方法。

写这篇博文：一是为了总结，二也是抛专引玉，如果有哪位朋友看了此博文，有更好的实现方式，还请多评论留言！

相互学习和进步！