完美实现控制DIV最小高度和DIV自适高度

开发 前端
我们在用DIV布局的时候经常会遇到这样的一种情况:我们需要设置一个div高度,当里面的东西超过这个高度时,让这个容器自动被撑开,这是什么原因呢?请看本文详细介绍。

本文和大家重点讨论一下如何控制DIV最小高度又DIV自适高度问题,如果我们需要设置一个div高度,当里面的东西超过这个高度时,让这个容器自动被撑开,也就是DIV自适应高度。当里面的信息很少时候,我们就设置它一个最小的固定高度。

如何控制DIV最小高度又DIV自适高度

我们在用div布局的时候经常会遇到这样的一种情况:我们需要设置一个DIV高度,当里面的东西超过这个高度时,让这个容器自动被撑开,也就是DIV自适应高度。当里面的信息很少时候,我们就设置它一个最小的固定高度。

我们知道,在IE6中,如果子容器的高度超过父容器的时候,父容器会被子容器撑开,所以我们可以直接设置一个height的高度值即可。但是在IE7和firefox就不行了,它不会自动撑开。

如果要设置DIV自适应高度,我们可以采用height:auto;这个属性;不过这个属性IE6又不支持了。是不是很头痛?其实解决这个问题不难,而且方法也不少,这里推荐一种:(假设我们需要控制的这个DIV最小高度是100px,超过时就让里面的信息自动撑开): 

  1. .div{  
  2.  
  3. height:auto!important;  
  4.  
  5. height:100px;  
  6.  
  7. min-height:100px  
  8.  
  9. }  

 注释:因为!important在IE7和Firefox都可以读到,而且权重高于后面的height:100px;所以当在IE7和Firefox显示的时候,就会用了前面的height:auto!important;而IE6识别不了!important,auto对它也不管用,因此会应用了后面的height:100px的样式;而min-height:100px表示DIV最小高度为100px;此属性在IE7和firefox都可以识别。

这样一个完美的即可以设置DIV最小高度,又可以DIV自适应高度的css样式就出来了,同时兼容了IE6、IE7和firefox!

【编辑推荐】

  1. DIV+CSS滑动门技术简介
  2. DIV自适应高度写法简介
  3. 14大CSS工具提高网页设计效率
  4. 实现DIV图片居中方法揭秘
  5. 鼠标经过时改变DIV背景颜色的三种途径

 

责任编辑:佚名 来源: anke1460
相关推荐

2010-09-15 13:14:04

DIV控制

2010-08-26 15:08:08

DIV高度

2010-09-09 10:37:39

CSSdiv列高度

2010-09-03 15:40:42

最小高度DIVCSS

2010-08-30 10:26:20

DIV自适应高度

2010-09-09 16:58:14

CSSmin-height

2010-08-30 09:52:03

DIV高度自适应

2010-08-30 09:22:13

DIV高度自适应

2010-08-24 16:03:22

Div高度

2010-08-19 15:04:26

IE6DIV

2010-08-18 15:10:44

IE7IE8Firefox

2010-08-26 14:18:25

DIV高度

2010-08-30 09:15:15

DIV高度自适应

2010-08-25 13:10:43

div高度CSS

2010-08-18 16:10:35

IE6CSS

2010-09-10 12:59:33

DIV嵌套CSS

2010-08-24 12:40:23

DIVCSSmin-height

2010-09-10 09:51:05

DIVCSS

2012-05-07 13:41:18

JavaScript

2010-09-09 14:21:27

CSS盒模型
点赞
收藏

51CTO技术栈公众号