zoukankan      html  css  js  c++  java
  • 固定高度div,随内容自动变高css定义方法

    *{ font-size:12px; margin:0; padding:0;}
    方法1:
    #testBox{border:1px solid #cccccc;padding:5px;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;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>

  • 相关阅读:
    bzoj1096 [ZJOI2007]仓库建设
    bzoj2054 疯狂的馒头
    bzoj1597 [Usaco2008 Mar]土地购买
    【洛谷P1083】[NOIP2012]借教室
    【洛谷P1367】蚂蚁
    【洛谷P1886】滑动窗口
    【洛谷P2216】[HAOI2007]理想的正方形
    【题解】洛谷P2914[USACO08OCT]断电Power Failure
    【数据结构】数组模拟链表
    【题解】洛谷P1002过河卒
  • 原文地址:https://www.cnblogs.com/hnyei/p/2217205.html
Copyright © 2011-2022 走看看