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>

  • 相关阅读:
    CC.NET+SVN+Msbuild
    react服务端/客户端,同构代码心得
    为什么国人很难出高质量开源
    FKP,一套全栈框架,基于react、webpack、koa1、babel
    嵌入式工程师的发展路线
    浅谈学习单片机的一些职业规划
    关于嵌入式新手面试的一些小技巧
    几点心得送给学习嵌入式的新手
    新手学习嵌入式需要掌握的几点知识点
    从迷茫到转机,一个嵌入式工程师的经历
  • 原文地址:https://www.cnblogs.com/hnyei/p/2217205.html
Copyright © 2011-2022 走看看