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解决高度自适应问题

CSS解决高度自适应问题 高度自适应问题,我很抵触用js去解决,因为不好维护,也不够自然,但是纯用CSS,难度不小,比如下面我要说的例子。 需求: 1. 这个矩形的高度和浏览...

CSS: 解决Div float后,父Div无法高度自适应的问题

在用CSS+DIV的布局中,经常会发现,当一个DIV float之后,如果他的高度超过了其父DIV的高度时,其父DIV的高度并不会相应的进行调整。要解决这个问题(也叫做闭合(清除)浮动),我们有四种办...

解决子级用css float浮动,而父级div不能自适应高度问题

原文地址 DIVCSS5 解决子级对象使用 css float 浮动,而父级 div 不能自适应高度,如下图: 造成这种情况的原因是:对象内的盒子使用float后,导致对象本身不能被撑开自适应...

DIV+CSS 设计的页面,DIV高度自适应问题

解决方法: 方法1: 在内层元素的最后面加入一个元素,并且设置这个元素不浮动,强制使外层元素包裹内层元素如 方法2:设置外层元素css属性overfloat为hidden或者auto,zoom设置...

div css 中 float left right clear 外框自适应高度问题

在CSS中很多时候会用到浮动来布局,也就是经常见到的float:left或者float:right,前者是左浮动(往左侧向前边的非浮动元素浮动,如果全是浮动得元素的话,就按照流式来浮动从左到右,放不下...
  • hzf100
  • hzf100
  • 2011年05月12日 00:26
  • 374

门户窗口高度自适应插件

  • 2013年10月16日 09:26
  • 1KB
  • 下载

关于CSS中的float和position (父容器div内的子元素div为float时,父元素无法撑开(或高度自适应)的解决方式)

当构建页面排版时,有不同的方法可以使用。使用哪一种方法取决于具体页面的排版要求,在不同的情况下,某些方法可能好过于其他的方法。 比如,可以使用若干个浮动元素来构建一个整洁简洁的页面排版。或者,如...

子元素浮动父容器高度不能自适应的CSS解决方法

网页前端工作者经常会遇到子元素设置float浮动后导致父容器高度不能自适应,也就是俗称的外部容器不能被“撑大”,常见表现为背景或边框异常,这时我们就需要来清除“闭合浮动”,方法主要有以下4种: 1....

父容器div内的子元素div为float时,父元素无法撑开(或高度自适应)的解决方式以及css中position和float的介绍

先简单给出父元素无法高度自适应时的解决方案: 第一种:在父容器上设置 overflow:auto 或者hidden可以让它自动包含子元素,从而具有了实际的height值。      第二种:在子元素的...

[译] 关于CSS中的float和position (父容器div内的子元素div为float时,父元素无法撑开(或高度自适应)的解决方式)

当构建页面排版时,有不同的方法可以使用。使用哪一种方法取决于具体页面的排版要求,在不同的情况下,某些方法可能好过于其他的方法。比如,可以使用若干个浮动元素来构建一个整洁简洁的页面排版。或者,如果需要更...
  • GoodShot
  • GoodShot
  • 2015年03月17日 21:04
  • 19215
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS解决高度自适应问题 地图窗口webgis
举报原因:
原因补充:

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