DIV最小高度且自适应高度

转载 2015年07月09日 11:30:34

在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>

 

Bootstrap-栅格系统自适应布局

1 container 顾名思义container是栅格系统最外层的class,直接被container包裹的只能是row这个class。需要注意的是container自带左右各15px paddin...
  • qiqingjin
  • qiqingjin
  • 2015年12月20日 09:51
  • 16681

真正的让iframe自适应高度 兼容多种浏览器随着窗口大小改变

今天有朋友问到我关于“iframe自适应高度”的问题,原本以为是很简单的问题,没想到折腾了20分钟才搞定。期间遇到几个问题,要么是高度自适应了,但是当窗口改变时会出现滚动条。也就是当窗口放大时ifra...
  • alex8046
  • alex8046
  • 2016年05月19日 18:37
  • 143969

总结iframe高度自适应,自适应子页面高度

在网上找了很多iframe的高度自适应,发现很多兼容性都不是很好,于是自己总结了一下。  页面html节点上要有 iframe id="mainFrame" name="mainF...
  • alex8046
  • alex8046
  • 2016年05月19日 18:35
  • 3369

怎么让Html的高度自适应屏幕高度

在写css静态页面的时候让Html的高度自适应屏幕高度是一个常见的需求,比如你有一个需要置底的bottom按钮,需要在内容不足一屏的时候显示在屏幕的底部,在内容超过一屏的时候显示在所有内容的底部。 效...
  • u014374031
  • u014374031
  • 2017年04月05日 15:36
  • 12440

bootstrap栅格系统中同行div高度不一致的解决方法

使用bootstrap的栅格系统排版,经常会碰到同一行的div高度不一致的情况,例如这样: 需要4个div高度相同,网上搜索了些方法,自己进行了尝试,下面这个方法是我试成功了的,但多少都有不尽人...
  • jewely
  • jewely
  • 2016年11月02日 11:12
  • 10064

控制浏览器窗口的可以缩放的最小高度和宽度

$(window).resize(function(){ if(document.body.clientHeight
  • chen517611641
  • chen517611641
  • 2016年08月03日 22:15
  • 6536

DIV的高度自适应及注意问题

转自:http://hi.baidu.com/samxx8/blog/item/eeb4c0efc112963facafd55b.html      积累了一些经验,总结出一些关于div的高度自适应...
  • tudopi
  • tudopi
  • 2010年05月11日 18:12
  • 5466

利用Jquery 定义Div的最小高度

在做网页的时候我们常常需要让一个内容多的时候能够伸展,内容少的时候,有个最小高度。下面就是我的实现方法:假设已经定义一个不定义高度。在脚本中添加如下代码:$(function(){if ($("#di...
  • zhichao2001
  • zhichao2001
  • 2011年02月28日 17:37
  • 5157

bootstrap modal插件弹出窗口如何限制最大高度,并且在内容过多时可以滚动显示

.modal-body{             max-height:400px;             overflow-y:auto;         }    只有在...
  • sxf359
  • sxf359
  • 2017年04月20日 10:31
  • 2867

响应式图像--图片自适应大小

之前在做图片自适应的时候想到的办法是把图片作为背景然后添加background-size:100%;让图片填满整个盒子的方式来实现,但这样图片会根据盒子的大小拉伸,导致显示变形,bootstrap中有...
  • zgrkaka
  • zgrkaka
  • 2016年09月08日 10:46
  • 24346
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:DIV最小高度且自适应高度
举报原因:
原因补充:

(最多只允许输入30个字)