高度的自适应（父div高度随子div的高度改变而改变）

1、如果父div不定义height、子div均为标准流的时候，父div的height随内容的变化而变化,实现父div高度随子div的高度改变而改变。

<style type="text/css">

      #aa{min-height: 1em;}

      #bb{height: 55px;}

      #cc{height: 66px;}

 </style>

<div id="aa">父div

      <div id="bb">子div</div>

      <div id="cc">子div</div>

 </div>

2、如果子div使用了float属性，此时已经脱离标准流，父div不会随内容的高度变化而变化，解决的办法是对父元素加

<style>

aa{overflow:auto;}

</style>

还可以清除浮动也能解决问题，如下

2、如果子div使用了float属性，此时已经脱离标准流，父div不会随内容的高度变化而变化，解决的办法是在浮动的div下面，加一个空div，设置clear属性both

<style type="text/css">

      #aa{min-height: 1em;}

      #bb{height: 55px; float: left;}

      #cc{height: 66px; float:right;}

 </style>

<div id="aa">父div

      <div id="bb">子div</div>

      <div id="cc">子div</div>

      <div style="clear:both"></div>

 </div>

可以使用伪列CSS实现

/*写css 时总为浮动而烦恼，如果用了浮动，浮动的父层不会跟着浮动框的高度增加而增加，在Firefox等符合W3C标准的浏览器中，如果有一个DIV作为外部容器，内部的DIV如果设置了float样式，则外部的容器DIV因为内部没有clear，导致不能被撑开。这个时候我们可以写个class 比如clearfix清除浮动*/

.clearfix:after {

  content: " ";

  display: block;

  clear: both;

  height:;

}

.clearfix {

  zoom:;

}
<div class="clearfix">

  <div class="floated"></div>

</div>
.clearfix:after {

    content: ".";     /*内容为“.”就是一个英文的句号而已。也可以不写。*/

    display: block;   /*加入的这个元素转换为块级元素。*/

    clear: both;     /*清除左右两边浮动。*/

    visibility: hidden;      /*可见度设为隐藏。注意它和display:none;是有区别的。visibility:hidden;仍然占据空间，只是看不到而已；*/

    line-height:;    /*行高为0；*/

    height:;     /*高度为0；*/

    font-size:;    /*字体大小为0；*/

}

.clearfix { *zoom:;}   /*这是针对于IE6的，因为IE6不支持:after伪类，这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。*/
/* 上面的代码就是.clearfix的定义和应用，简单的说下.clearfix的原理：

1、在IE6, 7下zoom: 1会触发hasLayout，从而使元素闭合内部的浮动。

2、在标准浏览器下，.clearfix:after这个伪类会在应用到.clearfix的元素后面插入一个clear: both的块级元素，从而达到清除浮动的作用。

3、在需要清除浮动的时候，只要写一个.clearfix就行了，然后在需要清浮动的元素中 添加clearfix类名就好了。

*/

示例

<html >

<head>

<title> css用clearfix清除浮动实例</title>

<meta name="generator" content="editplus" />

<meta name="author" content="" />

<meta name="keywords" content="" />

<meta name="description" content="" />

</head>

<body>

<style type="text/css">

/*所有主流浏览器都支持 :after 伪元素。*/

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}

.clearfix{*+height:1%;}/*不知道有什么用处，不加ie7也没有问题*/

.box{ background:#111;width:500px; position:relative;}

.l{float:left; background:#333;width:200px; height:100px;}

.r{float:right;background:#666;width:200px; height:200px;}

.s{width:100px; height:100px;background:#999;position:absolute;right:-50px;;}

</style>

<div class="box clearfix">

<div class="l">left</div>

<div class="r">right</div>

<div class="s">absolute</div>

</div>

</body>

</html>

css中div高度自适应的更多相关文章

  1. CSS实现div高度自适应

    1.有时候,我们希望容器有一个固定高度,但当其中的内容多的时候,又希望高度能够自适应,也即容器在纵向能被撑开,且如果有背景,也能够自适应.在一般情况下,使用min-height即可解决.但是广大网民的 ...

  2. Vue中div高度自适应

    Vue中尽量不使用dom的高度计算 <template> <div :style="conheight"> </template> <sc ...

  3. div中宽高度自适应文字换行居中问题解决

    <html> <head> <meta charset="UTF-8"/> <title>div中宽高度自适应文字换行居中demo& ...

  4. 纯CSS实现Div高度根据自适应宽度（百分百调整）

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

  5. 四种方法解决DIV高度自适应问题

    本文和大家重点讨论一下解决DIV高度自适应的方法,这里主要从四个方面来向大家介绍,相信通过本文学习你对DIV高度自适应问题会有更加深刻的认识. DIV高度自适应 关于DIV高度的自适应,一直是个让人头 ...

  6. DIV高度自适应及注意问题(转)

    本文和大家重点讨论一下DIV高度自适应及注意问题,主要包括父div高度随子div的高度改变而改变和子div高度随父亲div高度改变而改变两种情况. DIV高度自适应及注意问题 积累了一些经验,总结出一 ...

  7. CSS两列高度自适应，右边自适应

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

  8. div高度自适应（总结：min-height:100px; height:auto;的用法）

    对于div高度自适应问题,我总是用一句话:height:auto来解决. 但是很多时候我们需要的是当div内部有内容时,高度会随着内容的增加和增加,当div中没有内容时,div能够保持一个固定的高度. ...

  9. CSS布局之-高度自适应

    何为高度自适应? 高度自适应就是高度能跟随浏览器窗口的大小改变而改变,典型的运用在一些后台界面中上面一栏高度固定用作菜单栏或导航栏,下面一栏高度自适应用于显示内容.高度自适应不像宽度自适应那样简单,在 ...

随机推荐

  1. C++ STL中Map的按Key排序

    为了实现快速查找,map内部本身就是按序存储的(比如红黑树).在我们插入<key, value>键值对时,就会按照key的大小顺序进行存储.这也是作为key的类型必须能够进行<运算比 ...

  2. linux route命令使用

    说明:route命令是打印和操作ip路由表描述:route操作基于内核ip路由表,它的主要作用是创建一个静态路由让指定一个主 机或者一个网络通过一个网络接口,如eth0.当使用"add&qu ...

  3. jenkins部署前端node项目实例

    Jenkins 分发文件用到rsync命令   在 /etc/passwd中 修改 jenkins 为 /bin/bash jenkins:x:494:494:Jenkins Automation S ...

  4. AL2018届校招笔试——自然语言处理

    [单选40min+在线编程80min] 单选 1.以下进程的哪些行为不会导致操作系统向该进程发送一个信号?() A. 程序终止退出 B. 访问了一个非法的内存地址 C. 一个该程序正在监听的socke ...

  5. LaTeX数学公式输入

    [置顶 Tips ] 在 WinEdt 中快速添加公式字符而不必手动打出一个个letters~: 即会出现如下 GUI Page Control : ------------------------- ...

  6. C#指南，重温基础，展望远方！（3）类型和变量

    C# 有两种类型:值类型和引用类型. 值类型的变量直接包含数据,而引用类型的变量则存储对数据(称为“对象”)的引用.对于引用类型,两个变量可以引用同一对象:因此,对一个变量执行的运算可能会影响另一个变 ...

  7. javascript中call apply的区别

    obj.call(thisObj, arg1, arg2, ...); obj.apply(thisObj, [arg1, arg2, ...]); 两者作用一致,都是把obj(即this)绑定到th ...

  8. python oop面向对象笔记

    #coding:utf-8 class Person(object): def __init__(self,name,wage): self.name = name self.wage = wage ...

  9. php serialize序列化对象或者数组

    serialize序列化对象或者数组 $str=serialize(array('a'=>1,'b'=>2)); echo $str; 输入出a:2:{s:1:"a"; ...

  10. php面象对象魔术方法的使用

    class Moshu{ public $number; public function __construct($str)//构造方法,new实例时,自动调用 { //require('/confi ...