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. 转载:Linux的vim三种模式

    一般模式:在Linux终端中输入“vim 文件名”就进入了一般模式,但不能输入文字. 编辑模式:在一般模式下按i就会进入编辑模式,此时就可以写程式,按Esc可回到一般模式. 命令模式:在一般模式下按: ...

  2. python MySQLdb、socket与进线程

    1 centos下 安装MySQLdb模块 a 首先需要先安装 setuptool b yum install -y mysql_devel 头文件 c yum install -y python_d ...

  3. thinkphp基础入门(2)

    第一节介绍了thinkphp基本路径问题,第二节将介绍thinkphp的常见用法(M层跟V层) 我们先在Controller层新建个IndexController.class.php(新建文件的格式为 ...

  4. table 西边框样式

    table        {            border-collapse: collapse;            border: none;            width: 200p ...

  5. Android 字体颜色变化(点击)

    在开发的过程中,经常会遇到这样的场景,点击按钮,背景颜色发生变化:在drawable中,定义xxx.xml(selector) <selector xmlns:android="htt ...

  6. 认识Android

    安卓的特点开放性平等性无界性方便性硬件的丰富性 Android操作系统之中,一共将体系结构划分为四层:应用层(Application).应用框架层(Application Framework).系统运 ...

  7. uboot之board.c源码分析

    /lib_arm/board.c 主要完成了一些初始化的操作,最重要的是有start_armboot函数 _armboot_start地址为多少?? /* * * U-Boot code: 00F00 ...

  8. LeetCode-Word LadderII

    Given two words (start and end), and a dictionary, find all shortest transformation sequence(s) from ...

  9. SRM 600 DIV1

    A 按位讨论,取最小值; B 数据范围不大,首先要确定枚举角度; 状压枚举palindromes的列比较科学; 列确定后,目标就是求获得rcnt行的最小代价: dp[i][cnt]表示扫描到第i行,已 ...

  10. jQuery的基本语法

    index.html代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...