完美实现控制DIV最小高度和DIV自适高度

本文和大家重点讨论一下如何控制DIV最小高度又DIV自适高度问题,如果我们需要设置一个div高度,当里面的东西超过这个高度时,让这个容器自动被撑开,也就是DIV自适应高度。当里面的信息很少时候,我们就设置它一个最小的固定高度。

如何控制DIV最小高度又DIV自适高度

我们在用div布局的时候经常会遇到这样的一种情况:我们需要设置一个DIV高度,当里面的东西超过这个高度时,让这个容器自动被撑开,也就是DIV自适应高度。当里面的信息很少时候,我们就设置它一个最小的固定高度。

我们知道,在IE6中,如果子容器的高度超过父容器的时候,父容器会被子容器撑开,所以我们可以直接设置一个height的高度值即可。但是在IE7和firefox就不行了,它不会自动撑开。

如果要设置DIV自适应高度,我们可以采用height:auto;这个属性;不过这个属性IE6又不支持了。是不是很头痛?其实解决这个问题不难,而且方法也不少,这里推荐一种:(假设我们需要控制的这个DIV最小高度是100px,超过时就让里面的信息自动撑开):

.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都可以识别。

这样一个完美的即可以设置DIV最小高度,又可以DIV自适应高度的css样式就出来了,同时兼容了IE6、IE7和firefox!

时间: 2024-10-06 01:09:41

完美实现控制DIV最小高度和DIV自适高度的相关文章

CSS技能:运用DIV标签规划最小高度及自在扩展高度

需求在页面最上方运用文档符号运用以上办法时.; 发现需求类似td中height特点既能够确保最小高度又能够完成自在扩展高度的办法.逐步用div规划替换tabl规划的过程中. 通过查找资料和试验.可是该办法在ie6下不支撑,发现min-height能够完成最小高度.所以在款式中添加_height特点,此外关于可变高度的div假如需求自在扩展则不运用height特点即可,假如采用了height则div中的内容太长会跨过下鸿沟. 上下摆放的div1和div2假如div1高度添加后.此刻需求添加clea

ie6中DIV最小高度的解决方法

ie6中DIV最小高度的解决方法 IE6中,使用CSS定义DIV的高度的时候经常遇到这个问题,就是当DIV的最小高度小于一定的值以后,就会发现,无论你怎么设置最小高度,Div的高度会固定在一个值不再发生变动,这个问题很是烦人.如下面的情况. HTML代码<html> <head> <title></title> <style type="text/css"> <!-- #testdiv { background: #00

关于HTML前端设置自适应高度的DIV问题

如果要设置DIV自适应高度,我们可以采用height:auto;这个属性:不过这个属性IE6又不支持了.是不是很头痛?其实解决这个问题不难,而且方法也不少,这里推荐一种:(假设我们需要控制的这个DIV最小高度是100px,超过时就让里面的信息自动撑开): .div{ height:auto!important; height:100px; min-height:100px; } 注释:因为!important在IE7和Firefox都可以读到,而且权重高于后面的height:100px:所以当在

DIV布局-高度不同DIV,自动换行并对齐

最近弄了一个动态添加div框,每个div框内容有多有少,要支持div高度自适应,还要添加的div自动追加,并且换行还要保持每行对齐. 刚开始的效果: 要改啊,搞不定,问了UI高手,终于给出了完美解决方案: 效果: 因为要支持每个div可删除,删除后,后面的div自动补齐,所以用table不显示(除非想自虐的人可以试下) 最终就是css修改了一下就搞定了,术业专攻啊... <html> <head> <style> .test_area{ width:100%; back

图片宽度和高度都大于div,实现图片在div中居中

<style type="text/css"> #out{height:100px; width:150px; position:relative; overflow:hidden;} #mid{position:absolute;top:50%; left:50%; width:1000px; margin-left:-500px; text-align:center;} #in{ position:relative; top:-50%;} </style>

不定高度的div背景或背景图片不显示问题

在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置其高度,在IE浏览器下显示正常.但是使用Firefox/opera浏览时却出现最外层Div的背景颜色和边框不起作用的问题. 大体结构 <style> .a1 {width:100px;background:red;} .b1 {background:blue;width:50px;height:600px;} </style> </head> <body> <div clas

div里面的内容超出自身高度时,显示省略号

1.给DIV设置属性:width: 200px; text-overflow: ellipsis; overflow: hidden; 当div里面的内容总宽度找过 200PX的时候,超出的部分会以"..."的形式显示. 2.上面那个案例之适用于单行文本的现实,才会有效.但当div里面的内容出现多行的时候则不能达到预期的效果.下面是解决多行的时候显示"..."的方案. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

让2个并列的div根据内容自动保持同等高度js

有左右2个并列的div,2个div都不能限定高度.左div为导航,右div为内容.如何能让左div块自动获得和右div块相等的高度? 同时,也有网友提问到“如果右块高度比左块低,会不会导致左块的内容被溢出不显示之类的问题.应该是取左右2者的最高值吧来对齐吧”. 的确应该是哪个div Height值大,就将其值赋给Height值小的div,从而使2个div高度始终保持一致. function $(id){ return document.getElementById(id) } function

如何设置自适应当前浏览器高度的div块

嗯 就是下面这样 <!DOCTYPE html> <head> <title>adaptive this page size</title> <script type="text/javascript"> function adpaHeight() { var bodyHeight = document.documentElement.clientHeight; //获取当前浏览器宽高 document.getElementB