固定高度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,左右则根据宽度自适应相同值,即居中)即 ...
随机推荐
- 终极 Shell
在开始今天的 MacTalk 之前,先问两个问题吧: 1.相对于其他系统,Mac 的主要优势是什么?2.你们平时用哪种 Shell?…… 第一个童靴可以坐下了,Mac 的最大优势是 GUI 和命令行的 ...
- openstack nova 深入
一.概述: 由nova --debug list查看到: #nova --debug list DEBUG (session:195) REQ: curl -g -i -X GET http://19 ...
- 代码管理(二)sourcetree 安装与使用
一 .SourceTree简介 SourceTree 是 Windows 和Mac OS X 下免费的 Git 和 Hg 客户端,拥有可视化界面,容易上手操作.同时它也是Mercurial和Subve ...
- struts系列:校验(三)国际化
一.设置国际化资源标识 struts可以通过request_locale参数来进行国际化参数设置 例如页面可以通过如下链接完成语言切换: <s:a href="locale.actio ...
- 【转载并记录】SpringBoot 入门(一)
https://blog.csdn.net/dhklsl/article/details/80309999 https://www.cnblogs.com/zheting/p/6707035.html ...
- [转]@PathVariable和@RequestParam的区别
请求路径上有个id的变量值,可以通过@PathVariable来获取 @RequestMapping(value = "/page/{id}", method = Request ...
- webstorm 设置js或者html文件自动缩进为4个空格不生效
设置 tab 和自动缩进为4个空格不生效,解决办法如下 设置代码缩进 1. 依次打开files —- settings —- Editor —- Code Style —- JavaScript 2. ...
- 用友iuap云运维平台支持基于K8s的微服务架构
什么是微服务架构? 微服务(MicroServices)架构是当前互联网业界的一个技术热点,业内各公司也都纷纷开展微服务化体系建设.微服务架构的本质,是用一些功能比较明确.业务比较精练的服务去解决更大 ...
- Android应用的基本原理
原文:http://android.eoe.cn/topic/android_sdk 应用基础-Application Fundamentals Android应用程序以java作为开发语言.用And ...
- Spring实现动态数据源,支持动态加入、删除和设置权重及读写分离
当项目慢慢变大,訪问量也慢慢变大的时候.就难免的要使用多个数据源和设置读写分离了. 在开题之前先说明下,由于项目多是使用Spring,因此下面说到某些操作可能会依赖于Spring. 在我经历过的项目中 ...