|
|
div css自动调整高度问题 | |
| 文章来源：本站 作者：佚名 更新时间：2008-8-6 | |
|
DIV自动调整高度有好几种办法，这里介绍2种常用的办法,当然适合IE6 FF IE7 OP 其他浏览器我没有试过 第一是clear（清除），第二种是overflow和height的自动高度AUTO；
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>div自动高度</title> <style type="text/css"> <!-- .line{ border: 1px dashed #333;} .con {margin:auto; background-color:#FFFFCC;} .top{ height:200px; width:80%; background-color:#eee; margin:0 auto 10px auto;} .cl{ clear:both;} .con1 { overflow:auto; height:auto;margin:auto; background-color:#FFFFCC;} .top1{ height:200px; width:80%; background-color:#eee; margin:0 auto;} --> </style> </head> <body> <h4>利用clear自动高度，因为TOP层有下边界</h4> <div class="con line"> <div class="top line"></div> <div class="top line"></div> <div class="top line"></div> <div class="top line"></div> <div class="top line"></div> <div class="top line"></div> <div class="cl"></div> </div> <h4>利用overflow和高度的自动高度实现，无下边界的情况</h4> <div class="con1 line"> <div class="top1 line"></div> <div class="top1 line"></div> <div class="top1 line"></div> <div class="top1 line"></div> <div class="top1 line"></div> <div class="top1 line"></div> </div> </body> </html> | |
|
|
|