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>

  • 相关阅读:
    html5 canvas雨点打到窗玻璃动画
    html5跟随鼠标炫酷网站引导页动画特效
    如何实现复选框的全选和取消全选效果
    CSS3透明属性opacity
    jQuery实现方式不一样的跳转到底部
    ul li设置横排,并除去li前的圆点
    jQuery美女幻灯相册轮播源代码
    微软modern.IE网站,多版本IE免费测试工具集
    css中position与z-index
    C#一个方法返回多个值
  • 原文地址:https://www.cnblogs.com/hnyei/p/2217205.html
Copyright © 2011-2022 走看看