高度的自适应（父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. 图片转成base64, base64转成图片

    1.我们在看代码时经常在img或css背景图片中看到: src=”data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAB4CAMAAAAOusbgA ...

  2. sql查询备份或还原等操作的大概完成时间

    查询出来的还需完成时间还算比较准确 --查询备份或还原等操作的大概完成时间 select command ,percent_complete ,running_time))+' hour, ' ))+ ...

  3. LR 监控mysql

    sapphire的个人空间 中介绍了LoadRunner监控Mysql和Appache进程占用cpu的方法 方法如下: 公司的新产品需要监控Mysql和Appache进程,求高手帮忙总算成功了. 服务 ...

  4. MySQL数据库的查询缓冲机制

    MySQL数据库的查询缓冲机制 2011-08-10 11:07 佚名 火魔网 字号:T | T 使用查询缓冲机制,可以极大地提高MySQL数据库查询的效率,节省查询所用的时间.那么查询缓冲机制是怎样 ...

  5. AES + RSA + Hash 实现 C-S 安全交互

    概述 AES 由于其执行速度快,易于硬件实现,破解难度大等优势,被广泛用于数据的加密. 既然是对称加密,那如何保证秘钥的安全传输?很容易想到用 RSA 加密秘钥.由于只能用私钥解密,而私钥不需要交互双 ...

  6. FtpHelper类匿名获取FTP文件

    using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Net ...

  7. STL 容器（vector 和 list ）

    1.这个容器的知识点比较杂 迭代器的理解: 1.erase()函数的返回值,它的迭代器在循环遍历中的奇特之处: #define _CRT_SECURE_NO_WARNINGS #include < ...

  8. WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED！问题解决

    用mac终端ssh连接Linux服务器,提示以下错误: @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ WARNING: RE ...

  9. Java Jar maven 下载地址

    Java Jar maven 下载地址 https://repo1.maven.org/maven2/ 根据maven artifactid 查找相关jar

  10. tomcat 工作原理简析

    https://github.com/HappyTomas/another-tutorial-about-java-web/blob/master/00-08.md 在00-02.理解HTTP中给出了 ...