DIV高度自适应(min-height)与设置DIV最小高度为1px

2009-6-2 17:10:33 来源：本站 评论：

设置高度为1px等超小高度在IE下不正常显示的解决方案

根据div css网页布局的需要，我们有时候需要设置容器的高度为1px。而设置后在IE中预览，并不是所设置的样子，好象容器被撑开了，达不到想要的最小高度。

其实这是IE的默认行高所引起的，解决的方法也有很多，下面我们例举了overflow:hidden、line-heigh两种方法

overflow:hidden实现最小高度

XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>mb5u.com</title>  
  6. <style type="text/css">  
  7.   
  8. #YourHomePage_com_cn {  
  9.     width:100%;  
  10.     height:1px;  
  11.     background:#c00;  
  12.     overflow:hidden;  
  13.     }  
  14.   
  15. </style>  
  16. </head>  
  17. <body>  
  18. <div id="YourHomePage_com_cn">?</div>  
  19. </body>  
  20. </html>  

line-height实现最小高度

XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>mb5u.com</title>  
  6. <style type="text/css">  
  7.   
  8. #YourHomePage_com_cn {  
  9.     width:100%;  
  10.     height:1px;  
  11.     background:#c00;  
  12.     line-height:1px;  
  13.     }  
  14.   
  15. </style>  
  16. </head>  
  17. <body>  
  18. <div id="YourHomePage_com_cn">?</div>  
  19. </body>  
  20. </html>  

以上部分文章来自: http://www.mb5u.com/divcssjiaocheng/14307.html

将字体大小设为高度大小

XML/HTML代码
  1. <div style="height:2px;font-size:2px;background:#000000;width:778px;">&nbps;</div>   

此方法来自:http://www.jb51.net/article/9279.htm

DIV高度自适应-----CSS布局中最小高度（min-height）的妙用(兼容IE,FF)

 在用div+css排版页面时，发现了如下问题：给一个div加了高度之后，如果内容长度超过了div所定义的高度，在ie与傲游中，div会自动下降； 而在firefox（火狐）中，内容会溢出div，如果你的div加了边框，你就会发现，在火狐中内容会溢出。如果你要写一个高度会随内容变长而变长的 div且这个div有最小高度，那么你就不得不想办法解决它了。

        如果你熟悉css，可能你会说，这不是小儿科的问题吗？在css样式表中不就有一个min-height吗？呵呵，如果你是一个div工作者，你应该会在工作中发现IE与傲游根本不支持这个样式，而firefox支持这个样式。

  其实这个问题很好解决，假如你要定义一个最小高度为600px的div，你可以这样写：

CSS代码
  1. {height:auto !important;height:600px; min-height:600px;}  

则div在IE与firefox中都会有一个最小高度，且高度会自适应内容的长度。

此方法来自:http://www.zuomoban.cn/article/0a/165.html

DIV高度自适应(min-height)与设置DIV最小高度为1px此文章整理于网络. 更多文章请访问三原色创意科技.

上一篇：javascript获取容器的宽度与高度
下一篇：10个让CSS代码清晰的原则
正在读取…
我也评两句

   

版权说明：详细说明　网站所属：2006- © Syscy.com 三原色创意科技　 京ICP备08101643号