固定高度div,随内容自动变高css定义方法
*{ 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>
本文转自：http://www.cnblogs.com/hnyei/archive/2011/10/19/2217205.html
固定高度div,随内容自动变高css定义方法的更多相关文章
- 如何让2个并列的div根据内容自动保持同等高度
最近在工作中碰到一个需求: 有左右2个并列的div,2个div都不能限定高度.左div为导航,右div为内容.如何能让左div块自动获得和右div块相等的高度? 同时,也有网友提问到"如果右 ...
- 让2个并列的div根据内容自动保持同等高度js
有左右2个并列的div,2个div都不能限定高度.左div为导航,右div为内容.如何能让左div块自动获得和右div块相等的高度? 同时,也有网友提问到“如果右块高度比左块低,会不会导致左块的内容被 ...
- 设置DIV根据内容自动调整高度的三个方法
Div即父容器在Firefox.Chrome.Safari中不会根据内容自动调节高度,我们看下面的HTML代码: <divid="main"><divid=&qu ...
- 使用css使textbox输入内容自动变大写
<style type="text/css"> input[type="text"] { text-transform:uppercase; } & ...
- div 文章内容自动分屏显示
<head runat="server"> <title></title> <script language="javascri ...
- 小tips：Hbuilder编辑器开启less自动编译为css的方法
1.首先,依次打开菜单栏->工具->预编译器设置,打开后是这样的: 2.然后点击新建. 3.文件后缀为.less触发命令地址就是lessc.cmd所在的地址,先用npm全局安装less, ...
- Sublime Text3中 less 自动编译成 css 的方法
使用sublime text的less2css插件 步骤: 1.安装node.js,这个到官网下载即可 2.安装less,方法:命令行输入: npm install -g less 3.sublime ...
- 如何将less编译成css文件__less自动编译成css的方法总结
作为css的预处理less,拥有着比css更快捷方便,扩展了css的变量.Mixin.函数等特性,使 CSS 更易维护和扩展. 如何你已经回使用css,那么less就很容易上手了.如果不使用less ...
- 几个简单的css设置问题：div居中，ul li不换行 ，内容超出自动变省略号等
1 div在页面居中的问题 1)position值为relative时(相对定位),css设置属性margin:0 auto;(0 auto,表示上下边界为0,左右则根据宽度自适应相同值,即居中)即 ...
随机推荐
- 纯CSS兑现侧边栏/分栏高度自动相等(转)
这里直接介绍我认为的最佳的侧边栏/分栏高度自动相等方法.核心的CSS代码如下(数值不固定): margin-bottom:-3000px; padding-bottom:3000px; 再配合父标签的 ...
- jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法(转)
系统默认的滚动条样式,真的已经看的够恶心了.试想一下,如果在一个很有特色和创意的网页中,出现了一根系统中默认的滚动条样式,会有多么的别扭. 为了自己定义网页中的滚动条的方法,我真的已经找了很久了,就目 ...
- 算法中的 log 到底是什么？
之前一直不解为何算法中经常会看到 log 今天看<数据结构与算法分析 Java 语言描述>(第 3 版)2.4.3 节 求最大子序列和的分治算法实现时才注意到原因 翻看第 29 页的最后一 ...
- Junit 4.x 单元测试，参数化测试，套件测试 实例
对下面三个类进行单元测试 ,组成套件测试. public class Calculate { public int add(int a, int b) { return a + b; } public ...
- hadoop相关内容
数据库导出到hadoop http://www.ibm.com/developerworks/cn/data/library/techarticle/dm-1212liuqy/ http://www. ...
- Linux批量kill进程
使用awk批量杀进程的命令: ps -ef | grep firefox | grep -v grep | awk '{print "kill -9 "$2}'|sh 说明: #列 ...
- CentOS扩展库配置
背景:经常用到第三方的库,通过yum命令查询不到.例如:yum search ilbcWarning: No matches found for: ilbc 不要感叹,CentOS没你想象的支持力度那 ...
- Oracle的执行计划（来自百度文库）
如何开启oracle执行计划 http://wenku.baidu.com/view/7d1ff6bc960590c69ec37636.html怎样看懂Oracle的执行计划 http://wenku ...
- laravel5.7的redis配置,一直报错Class 'Predis\Client' not found
laravel5.7的redis配置,一直报错Class 'Predis\Client' not found 首先我检查了配置,和composer 都没有错,用原生的redis也可以正常连接和读写. ...
- WPF 4 Ribbon 开发 之 快捷工具栏（Quick Access Toolbar）
转自 http://www.cnblogs.com/gnielee/archive/2010/05/10/wpf4-ribbon-quick-access-toolbar.html 在Office 2 ...