CSS解决高度自适应问题 地图窗口webgis

转载 2016年08月20日 15:58:00

高度自适应问题,我很抵触用js去解决,因为不好维护,也不够自然,但是纯用CSS,难度不小,比如下面我要说的例子。

需求:

1. 这个矩形的高度和浏览器窗口的高度相同,不能出现纵向滚动条

2. 绿色部分高度固定,比如50px

3. 紫色部分填充剩余的高度


HTML结构暂且如下:

<div id="main">
    <div id="nav">nav</div>
    <div id="content">content</div>
</div>

 

先看1.

html, body {
    height: 100%;
    margin: 0px;
    padding: 0px;
}
#main {
    background-color: #999;
    height: 100%;
}

 

需求2 也很容易:

#nav {
    background-color: #85d989;
    height: 50px;
}


需求3 是最让人头痛的,一般我们都会想到height:100%, 但是100%是以父元素的高度为准的,比如父元素的高度是300px,#nav占去了50px,#content理应是250px,但是写成height: 100%,结果就是#content的高度也变成了300%,出现了需求不允许的纵向滚动条。


当然,用js解决这种问题是相当简单的,但是这次我就是不想用js,下面就来试吧:


这个需求真的让我非常崩溃,看似简单,换了n种方式都觉得不靠谱,最后找到一种最接近理想效果的方法,如下

html, body {
    height: 100%;
    margin: 0px;
    padding: 0px;
}
#main {
    background-color: #999;
    height: 100%;
}
#nav {
    background-color: #85d989;
    width: 100%;
    height: 50px;
    float: left;
}
#content {
    background-color: #cc85d9;
    height:100%;
}


这里利用了浮动,最后的结果仅仅是看着没问题,当然了,如果你只是简单的展示文本和图片,这种方法已经够用了,但是如果你想用js做点交互,比如#content内部有个需要拖拽的元素,它的top最小值肯定不能是0,否则就被#nav挡住了,悲剧的是我就有这种需求,于是继续苦逼的试。

 

经过一天的尝试,加上高人指点,终于有解了,泪奔啊

#nav {
    background-color: #85d989;
    width: 100%;
    height: 50px;
}
#content {
    background-color: #cc85d9;
    width: 100%;
    position: absolute;
    top: 50px;
    bottom: 0px;
    left: 0px;
}

 

重点是要top和bottom一起使用,这是很反常规的用法,可以强制定义盒模型的区域,神奇啊


转:http://www.cnblogs.com/zhujl/archive/2012/03/20/2408976.html

页面自适应方法

标题严格遵守了新广告法,你再不爽,我也没犯法呀!屁话不多说,直入! 所谓布局,其实包含两个含义:尺寸与定位。也就是说,所有与尺寸和定位相关的属性,都可以用来布局。 大体上,布局中会用到的有...
  • jkdcoach
  • jkdcoach
  • 2017年10月20日 17:00
  • 179

百度地图AIP(2):地图根据标注点位置自适应调整缩放等级

效果 源码 github https://github.com/liaotuo/BMapAPI 核心方法 // 根据点的数组自动调整缩放级别 function setZoom (b...
  • c1481118216
  • c1481118216
  • 2016年09月11日 18:03
  • 3063

图片映射(HTML Map)自适应窗口大小,再也不用为匹配尺寸而发愁了

在上一节图片映射那么拽中,我们讲了图片映射的使用方法,然而很多小伙伴们抱怨图片不能根据页面的窗口调整而自适应,图片地图成了摆设,今天给大家分享一个插件,有了它,小伙伴们再也不用担心图片地图走错门了。话...
  • shehun1
  • shehun1
  • 2014年04月11日 22:10
  • 14879

HTML热区map坐标,随窗口大小自适应办法(javascript)

为图片添加MAP: [html] view plaincopy div>   span id="lbresult">   img src='YardCr...
  • dxh_0829
  • dxh_0829
  • 2014年09月09日 16:50
  • 5759

js实现页面自适应

Login body{ text-align: left; background-color: F6F6F6; background-attachment: fixe...
  • xiaosong_2016
  • xiaosong_2016
  • 2017年05月17日 21:05
  • 592

网页自适应屏幕宽度

随着3G的普及,越来越多的人使用手机上网。 移动设备正超过桌面设备,成为访问互联网的最常见终端。于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页内容? 手机的屏幕比...
  • ithouse
  • ithouse
  • 2014年09月15日 17:27
  • 5158

Echarts 页面多图自适应的解决办法

网上看到有不少人使用Echarts抽象出来的框架,实现自适应的效果代码:window.onresize  = option.chart.resize(), 这个代码基本是官网上的window.onre...
  • chensirbbk
  • chensirbbk
  • 2015年05月04日 16:32
  • 32096

用js实现地图窗体自适应不同的浏览器高度

//调用方法 autodivheight(); function autodivheight(){ //函数:获取尺寸 //获取浏览器窗口高度 var win...
  • wbx_wlg
  • wbx_wlg
  • 2017年09月25日 16:44
  • 130

关于一个前端移动端高度自适应例子

移动端页面样式布局
  • weixin_37546664
  • weixin_37546664
  • 2017年05月11日 00:11
  • 1845

PC端自适应布局

截止目前,国内绝大多数内容为主的网站(知乎,果壳,V2EX,网易新闻等)均使用内容区定宽布局,大多数电商网站(网易考拉,京东,聚美优品)也使用了内容区定宽的布局,也有些网站使用了自适应布局: 天猫 ...
  • sunshine940326
  • sunshine940326
  • 2017年02月15日 14:03
  • 8539
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS解决高度自适应问题 地图窗口webgis
举报原因:
原因补充:

(最多只允许输入30个字)