使用DIV控制最小高度和自适高度
创始人
2024-07-14 01:30:34
0

你对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表示最小高度为100px;此属性在IE7和firefox都可以识别。

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

【编辑推荐】

  1. JavaScript巧解IE6至IE8兼容问题
  2. JavaScript代码轻松实现DIV圆角
  3. 深入学习CSS DIV相对定位语法
  4. 使用DIV+CSS布局网站的四大缺陷
  5. Firefox、IE7、IE6浏览器兼容问题概念解析

 

 

相关内容

热门资讯

如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
施耐德电气数据中心整体解决方案... 近日,全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”,作为该活动的...
Windows恶意软件20年“... 在Windows的早期年代,病毒游走于系统之间,偶尔删除文件(但被删除的文件几乎都是可恢复的),并弹...
20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站,直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...
着眼MAC地址,解救无法享受D... 在安装了DHCP服务器的局域网环境中,每一台工作站在上网之前,都要先从DHCP服务器那里享受到地址动...
为啥国人偏爱 Mybatis,... 关于 SQL 和 ORM 的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行...