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有最小高度且自适应高度的更多相关文章

  1. CSS| 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级用css float浮动 而父级div没高度不能自适应高度 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层 ...

  2. DIV+CSS左右两列自适应高度的方法

    我们在用DIV+CSS布局网页的时候,必然会遇到左右两列自适应高度的问题,就是左边列的背景会随着右边列内容的增加也相应的增加高度,下面就教大家DIV+CSS左右两列自适应高度的方法. 下面给出最终的效 ...

  3. iOS 【终极方案】精准获取webView内容高度,自适应高度

    前言:是这样的,刚写完上一篇文章还没缓过神来,上一篇文章我还提到了,想和大家聊聊原生+H5如何无缝连接的故事.结果我朋友就给我发了两篇他的作品.他的做法也都有独到之处.好的文章都是这样,让你每次看都能 ...

  4. 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子 ...

  5. 子级用css float浮动 而父级div没高度不能自适应高度

    子级对象使用css float浮动 而父级div不能自适应高度. 对父级div标签闭合</div>前加一个clear清除浮动对象. <!DOCTYPE html> <ht ...

  6. 拥有最小高度能自适应高度,IE、FF全兼容的div设置

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xh ...

  7. 让一个父级div根据子级div高度而自适应高度

    需求是点击上传的时候进行子级div高度不定,相对来说父级div高度也不能固定,把元素都设置成普通标准流,然后样式可以使用margin内边距或者padding外边距来进行调节 放上代码供参考: .opu ...

  8. div+css 左右两列自适应高度 ,以及父级div也跟着自适应子级的高度(兼容各大浏览器)

    <style type="text/css" media="screen"> <!-- #main {width:500px;_height: ...

  9. 在easyui中如何修改combobox的下拉框的高度为自适应高度

    在easyui中,有时候easyui下拉框的高度比较高,如果我们的值比较少,而下拉框的高度很高的话看起来不好看,修改前效果如下所示: 要修改下拉框的高度和我们的值自适应的 话,只要添加一个panelH ...

随机推荐

  1. jquery的节点查询

    jQuery.parent(expr)           //找父元素 jQuery.parents(expr)          //找到所有祖先元素,不限于父元素 jQuery.children ...

  2. jQuery get/post区别及contentType取值

    1.GET访问 浏览器 认为 是等幂的 就是 一个相同的URL 只有一个结果[相同是指 整个URL字符串完全匹配]所以 第二次访问的时候 如果 URL字符串没变化浏览器是直接拿出了第一次访问的结果,表 ...

  3. Ubuntu 10.04启动进入命令行模式

    进终端先  运行 sudo gedit /etc/default/grub  找到 GRUB_CMDLINE_LINUX_DEFAULT=”quiet splash”  改为 GRUB_CMDLINE ...

  4. toast组件较为完美版本

    <!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...

  5. PIN的经验和技巧

    以前总是吧PIN码排序弄成:9876543210或0123456789, 有的路由PJ好久还没出密码,但还是PJ了3~4个,大多数是抓跑, 所以,还是建议大家先跑包,实在跑不出就来PIN, 一般人的设 ...

  6. 文件下载cordovaFileTransfer:cordova.file.documentsDirectory is null

    在Android平台上使用:$cordovaFileTransfer进行文件下载时提示:cordova.file.documentsDirectory is null,查了以下文档参照:http:// ...

  7. java中一直说一个汉字使用两个字节,原来是不准确的

    utf-8码的中文都是3字节的,而 gbk/gbk18030 是2字节的

  8. delphi编写dll心得, 谢谢原作者的分享。转

    delphi编写dll心得 1.每个函数体(包括exports和非exports函数)后面加 'stdcall;', 以编写出通用的dll2.exports函数后面必须加'export;'(放在'st ...

  9. Swing UI - 可收起与开展内容面板实现演示

    基于JAVA Swing实现的自定义组件可折叠的JPanel组件 基本思想: 可折叠面板,分为两个部分-头部面板与内容面板 头部面板– 显示标题,以及对应的icon图标,监听鼠标事件决定内容面板隐藏或 ...

  10. HDOJ 3622 - Bomb Game 2-sat+二分....细心...

    题意: 有N个炸弹..每个炸弹有两个位置可以选择..把炸弹放到其中一个地方去...炸弹的爆炸范围是其为圆心的圆...两个炸弹不能有攻击范围上的重合..问要满足条件..炸弹爆炸范围的半径最长能是多少.. ...