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

css系统学习篇

本系列课程从0开始系统地讲解css。如果你是前端新手,不知从何下手学习,那么可以认真学习本系列课程。学完之后基本常用的css属性你都能够有所了解,再搭配上适当的代码练习,很快就能做出漂亮的网页效果。
  • 2016年04月24日 15:33

解决div高度一窗口一样的问题

众所周知,css中width:100%;会使div的宽度与窗口一样大小。然而在div的css中height:100%并不会。 这时只需要把body与html的高度也设置成100%就行了。 html,...
  • weixin_38544803
  • weixin_38544803
  • 2017-06-02 16:10:06
  • 770

WebGIS前端瓦片地图显示原理及实现

目前,有很多WebGIS开发包,ArcGIS API for JS、OpenLayers、LeafLetjs等为我们从事WebGIS开发的人封装了很多强大的功能。我们很方便的使用这些库的时候,也让我们...
  • tmchongye
  • tmchongye
  • 2017-03-19 02:58:17
  • 4597

Arcgis for JS之地图自适应调整

当浏览器大小发生变化或者地图展示区域的大小发生变化时,地图的自适应调整。...
  • GISShiXiSheng
  • GISShiXiSheng
  • 2015-01-13 14:20:03
  • 3529

openlayers加载静态图片的地图

第一个例子:简单的地图显示 直接上代码                 .map {         height: 600px;//显示地图的高度         wid...
  • duanleiyadang
  • duanleiyadang
  • 2017-04-25 15:51:04
  • 1729

百度地图手动添加自适应容器变化api,改变宽高,地图不会自适应变化

百度地图的api会说明容器会自适应容器变化,其实不是的。一点都不自适应变化,如api图片 map.enableAutoResize();//地图自适应容器宽高变化,手动启用...
  • zhumengzj
  • zhumengzj
  • 2017-10-23 14:26:10
  • 695

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

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

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

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

CSS根据屏幕分辨率宽度自动适应的办法

CSS根据屏幕分辨率宽度自动适应的办法   第一种办法是JS选择CSS if (screen.width == 640) { document.write('');...
  • bestlove12345
  • bestlove12345
  • 2016-11-13 11:55:27
  • 15922

CSS 如何让 height:100%; 起作用

当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果。你知道为什么height:100%不起作用吗? 按常理,当...
  • u014520745
  • u014520745
  • 2016-09-18 14:25:22
  • 18427
收藏助手
不良信息举报
您举报文章:CSS解决高度自适应问题 地图窗口webgis
举报原因:
原因补充:

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