前端移动端高度自适应

为了子元素能够有效的使用百分比，给html和body的height设置百分比：html,body{width:100%;height:100%}，基于浏览器的解析规则。然后定义一个相对定位：{position:relative;}

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

前端移动端高度自适应相关推荐

android recyclerview item自适应高度_web前端入门到实战：css让一个盒子的高度自适应屏幕剩余的部分...
项目中,移动端要自适应,由于有时候数据不够,所以导致了有的区域空白要求:没有数据的时候能够充满屏幕,数据超出屏幕就出现滚动条做法 1-让容器高度充满这个屏幕在容器内容很少的情况下,要想让这个容器 ...
重复造轮子系列——基于FastReport设计打印模板实现桌面端WPF套打和商超POS高度自适应小票打印...
重复造轮子系列--基于FastReport设计打印模板实现桌面端WPF套打和商超POS高度自适应小票打印一.引言桌面端系统经常需要对接各种硬件设备,比如扫描器.读卡器.打印机等. 这里介绍下桌面端 ...
巧用margin/padding的百分比值实现高度自适应（
转载自https://segmentfault.com/a/1190000004231995 巧用margin/padding的百分比值实现高度自适应(多用于占位,避免闪烁) 布局自适应前端 cs ...
两列高度自适应（转）
相信很多人都非常喜欢用div+css布局,无论你是前端开发者,还是后台程序员,因为它的好处实在太多,可以用很少的代码来控制布局,然后用CSS表现其形态,表现和样式分离.而且在SEO方面,它还能提供30 ...
css经典布局——头尾固定高度中间高度自适应布局
今天说说一个经典布局:头尾固定高度中间高度自适应布局! 转文请标明 --- 出处:穆乙 http://www.cnblogs.com/pigtail/ 相信做过后台管理界面的同学,都非常清楚这个布局. ...
Iframe高度自适应（兼容IEFirefox、同域跨域）
在实际的项目进行中,很多地方可能由于历史原因不得不去使用iframe,包括目前正火热的应用开发也是如此. 随之而来的就是在实际使用iframe中,会遇到iframe高度的问题,由于被嵌套的页面长度不固 ...
html 图片高度页面高度自适应,怎样让网页图片高度自适应宽度
[摘要] 你肯定知道width百分比可以实现图片宽度的自适应,那么你知道高度也可以根据宽度变话而自适应比变化么,看下本文就了解了! 当前响应式布局,内容尺寸自适应设备是众多网站开发者的选择,毕竟现在显 ...
微信小程序swiper高度自适应，swiper的子元素高度不固定
小程序 swiper 组件默认高度150px,并且如果子元素过高,swiper不会自适应高度解决方案一: (总体来说不够完美,适合满屏滑动) 如果不是满屏的状态,用scroll-view IOS滑动 ...
前端pc端、手机端适配基本知识
前端pc端.手机端适配问题一个项目如何做到手机.电脑共用的方式 1.第一种方式:响应式布局(栅格布局),即通过媒体查询控制css样式,从而实现一套代码手机.电脑共享.一般而言,手机.电脑共享样式,其 ...
移动端h5框架自适应_Html5移动端页面自适应百分比布局
按百分比布局,精度肯定不会有rem精确 Document * { padding: 0; margin: 0; } .one { width: 20%; height: 100px; float: l ...

前端移动端高度自适应

前端移动端高度自适应相关推荐

最新文章

热门文章