DIV+CSS中min-height属性使用技巧

本文和大家重点讨论一下DIV+CSS中min-height属性的使用方法，相信本文介绍一定会让你有所收获。

DIV+CSS中min-height属性使用技巧

最小高度可以设定一个BOX的最小高度，当其内容较少时时，也能保持BOX的高度为一定，超出就自动向下延伸，但到目前为止，只有Opera和Mozilla支持，IE7以上版本支持，如何在现有基础上（IE680-90%），合理、妙用最小高度了？

假定有二个BOX（box1和box2），我们都设置最小高度为150PX。

以下是引用CSS片段：

 
 
 
    
  
  
  
  1. div.box1,div.box2{width:300px; 
    2. 
  
  
  
  2. min-height:150px;background:#EEE; 
    3. 
  
  
  
  3. float:left;margin-right:20px;} 
    4.

以下是引用HTML源代码片段：

 
 
 
    
  
  
  
  1. IE6中没保持最小高度为150px
  • 所有IE支持保持最小高度为150px

  • 现在的效果，IE6及部分IE7版本中没保持最小高度为150px。

    解决的方法

    提供CSS hack来设定IE6高度

    以下是引用CSS片段：

     
 
 
      
  
  
  
    1. div.box1,div.box2{width:300px; 
      2. 
  
  
  
    2. min-height:150px;background:#EEE;float:left; 
      3. 
  
  
  
    3. margin-right:20px;} 
      4. 
  
  
  
    4. div.box2{*height:auto!important;*height:150px; 
      5. 
  
  
  
    5. min-height:150px;} 
      6. 
  
  
  
    6.

    以上是通过对box2设置说明如下：

    *height:auto!important;*height:150px;来区别IE6,IE7,及其它浏览器来实现兼容最小高度-你可能需要了解CSShack之区别不同浏览器的写法。

    通过以上DIV+CSS实例希望你能了解各浏览器支持最小高度（min-height:）方法，这里用了csshack方法来区别ie6和部分ie7中不支持min-height方法。

    本文标题：DIV+CSS中min-height属性使用技巧
    当前URL：http://www.shufengxianlan.com/qtweb/news9/417509.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    建站公司知识

    同城分类信息

    做网站　　 　成都做网站　　 　成都网络营销　　 　网站建设方案　　 　达州网站设计　　 　品牌网站建设　　 　亮美家　　 　平昌保洁　　 　安娜尚美　　 　全网营销网站推广　　 　航空文化传媒　　 　教育培训网站建设方案　　 　网站开发　　 　达州主机托管　　 　升施印刷　　 　四川服务器托管　　 　成都橡塑保温管　　 　专业网站建设　　 　达州服务器托管　　 　成都移动机房