固定高度div,隨內容自動變高css定義方法

來源:互聯網
上載者:User

*{ font-size:12px; margin:0; padding:0;}
方法1:
#testBox{border:1px solid #cccccc;padding:5px;width:220px;
min-height:100px; /*高度最小值設定為:100px*/
height:auto !important; /*相容FF,IE7也支援 !important標籤*/
height:100px; /*相容ie6*/
方法2:
/*單獨用下面這個方法也可以實現*/
height:expression(this.height < 100 ? "100px" : this.height+"px");

 

<!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=utf-8" />
<title>無標題文檔</title>
</head>
<style type="text/css">
*{ font-size:12px; margin:0; padding:0;}
#testBox{border:1px solid #cccccc;padding:5px;width:220px;
min-height:100px; /*高度最小值設定為:100px*/
height:auto !important; /*相容FF,IE7也支援 !important標籤*/
height:100px; /*相容ie6*/

/*單獨用下面這個方法也可以實現*/
/*height:expression(this.height < 100 ? "100px" : this.height+"px");*/
}
</style>
<body>
<div id="testBox">
<ul>
<!--只有一條記錄時是預設高度-->
<li>這裡是每一條內。。。。。</li>
<!--刪除注釋後,高度隨之增加。
<li>這裡是每一條內。。。。。</li>
<li>這裡是每一條內。。。。。</li>
<li>這裡是每一條內。。。。。</li>
<li>這裡是每一條內。。。。。</li>
<li>這裡是每一條內。。。。。</li>
<li>這裡是每一條內。。。。。</li>
<li>這裡是每一條內。。。。。</li>
<li>這裡是每一條內。。。。。</li>
<li>這裡是每一條內。。。。。</li>
<li>這裡是每一條內。。。。。</li>
<li>這裡是每一條內。。。。。</li>
-->
</ul>
</div>
</body>
</html>

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.