div有最小高度且自适应高度
DIV最小高度且自适应高度
在IE6中,如果子容器的高度超过父容器的时候,父容器会被子容器撑开,所以我们可以直接设置一个height的高度值即可。但是在IE7和firefox就不行了,它不会自动撑开。
如果要设置DIV自适应高度,我们可以采用height:auto;这个属性;不过这个属性IE6又不支持了。是不是很头痛?其实解决这个问题不难,而且方法也不少,这里推荐一种:(假设我们需要控制的这个DIV最小高度是100px,超过时就让里面的信息自动撑开):
|
1
2
3
4
5
|
.div{ height:auto!important; height:100px; min-height:100px;} |
注释:因为!important在IE7和Firefox都可以读到,而且权重高于后面的height:100px;所以当在IE7和Firefox显示的时候,就会用了前面的height:auto!important;而IE6识别不了!important,auto对它也不管用,因此会应用了后面的height:100px的样式;而min-height:100px表示DIV最小高度为100px;此属性在IE7和firefox都可以识别。
而在IE8和chrome当中,上述方法是不行的。
想要实现必须在撑高的div下面加个空div
|
1
|
<div style="clear:both"></div> |
div有最小高度且自适应高度的更多相关文章
- CSS| 解决子级用css float浮动 而父级div没高度不能自适应高度
解决子级用css float浮动 而父级div没高度不能自适应高度 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层 ...
- DIV+CSS左右两列自适应高度的方法
我们在用DIV+CSS布局网页的时候,必然会遇到左右两列自适应高度的问题,就是左边列的背景会随着右边列内容的增加也相应的增加高度,下面就教大家DIV+CSS左右两列自适应高度的方法. 下面给出最终的效 ...
- iOS 【终极方案】精准获取webView内容高度,自适应高度
前言:是这样的,刚写完上一篇文章还没缓过神来,上一篇文章我还提到了,想和大家聊聊原生+H5如何无缝连接的故事.结果我朋友就给我发了两篇他的作品.他的做法也都有独到之处.好的文章都是这样,让你每次看都能 ...
- 解决子级用css float浮动 而父级div没高度不能自适应高度
解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子 ...
- 子级用css float浮动 而父级div没高度不能自适应高度
子级对象使用css float浮动 而父级div不能自适应高度. 对父级div标签闭合</div>前加一个clear清除浮动对象. <!DOCTYPE html> <ht ...
- 拥有最小高度能自适应高度,IE、FF全兼容的div设置
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xh ...
- 让一个父级div根据子级div高度而自适应高度
需求是点击上传的时候进行子级div高度不定,相对来说父级div高度也不能固定,把元素都设置成普通标准流,然后样式可以使用margin内边距或者padding外边距来进行调节 放上代码供参考: .opu ...
- div+css 左右两列自适应高度 ,以及父级div也跟着自适应子级的高度(兼容各大浏览器)
<style type="text/css" media="screen"> <!-- #main {width:500px;_height: ...
- 在easyui中如何修改combobox的下拉框的高度为自适应高度
在easyui中,有时候easyui下拉框的高度比较高,如果我们的值比较少,而下拉框的高度很高的话看起来不好看,修改前效果如下所示: 要修改下拉框的高度和我们的值自适应的 话,只要添加一个panelH ...
随机推荐
- jquery.validation.js的自定义方法
jQuery.validator.addMethod(name,method[,message]) name方法名 method:function(value,element,params)//val ...
- SQL复制表结构和数据
1.复制表结构和数据 select * into 目的数据库名.dbo.目的表名 from 原表名 select * into my0735home.dbo.infoMianTest from inf ...
- js鼠标滑动图片显示隐藏效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JS中typeof与instanceof的区别 (2010-05-26 10:47:40
JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空,或者是什么类型的.但它们之间还是有区别的: typeof typeof 是一个一元运算,放在一个运算数之前 ...
- php explode 用法详解
定义和用法explode() 函数把字符串分割为数组. 语法explode(separator,string,limit)参数 描述 separator 必需.规定在哪里分割字符串.string 必需 ...
- github 提交时候提示 org.eclipse.jgit.errors.ObjectWritingException: Unable to create new object: /usr/local/apache243/ht
只需要执行 chmod -R 777 ./* 把 .git文件权限设置为 777便可以实现.
- [Python笔记]第一篇:基础知识
本篇主要内容有:什么是python.如何安装python.py解释器解释过程.字符集转换知识.传参.流程控制 初识Python 一.什么是Python Python是一种面向对象.解释型计算机程序设计 ...
- python中如何单独测试一个函数的作用
#!/usr/bin/python import os def get_env_varible(key): return os.getenv(key) if __name__ == '__main__ ...
- js 解析 json
1.简单的json格式 { "user": [ { "name":"name1", "age":24, "se ...
- restful-----------------------------接口设计方式(一种风格)
http动词: GET(SELECT):从服务器取出资源(一项或者多项) POST(CREATE):在服务器创建一个资源 PUT(UPDATE):在服务器更新资源(客户端提供改变后的完整资源)完整更新 ...