高度的自适应（父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. js实现全选，全不选，反选

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

  2. 不吐不快之EJB演练——开篇概述

    EJB(Enterprise Java Bean)是J2EE规范的重要核心,它是一个用户分布式业务应用的标准服务端组件模型,它是一种能够高速开发大规模企业应用的组件体系结构.上面这样官方的解释可能对于 ...

  3. RxJava API使用示例

    概述 RxJava API示例代码,可离线查看rxjava1.0大部分API的marble图,描述,示例代码,并支持示例代码实时输出及展示执行结果. 详细 代码下载:http://www.demoda ...

  4. 获取SQL Server的安装时间

    近期安装SQL Server 2014时.还没有正式的License,仅仅能试用3个月.想知道什么时候到期,就要知道SQL Server 2014是什么时候安装的.假设你没有特意记录安装日期(实际大部 ...

  5. jquery easyUi columns日期格式化

    jquery easyUi  columns日期格式化 方法一 Date.prototype.format = function (format) { var o = { "M+" ...

  6. 补知识：EntityFramework Core映射关系详解

    前言 本节我们回归下EF Core基础,来讲述EF Core中到底是如何映射的,废话少说,我们开始. One-Many Relationship(一对多关系) 首先我们从最简单的一对多关系说起,我们给 ...

  7. 每天进步一点点——Ganglia的Python扩展模块开发

    转载请说明出处:http://blog.csdn.net/cywosp/article/details/39701245 注:本文涉及到的代码都在centos 6.5 64bit系统上通过验证,Gan ...

  8. Atitit.md5 实现原理

    Atitit.md5 实现原理 1. 算法流程图2 2. MD5算法过程:2 2.1. 3. 处理分组数据3 3. MD5加密字符串实例5 4. Md5的历史7 4.1.1. MD27 4.1.2. ...

  9. c中头文件在cpp文件里引用和.h文件引用的思考

    我们在编敲代码中头文件是常常使用的. 可是头文件是应该包括在.H文件里还是在.cpp文件里.在这个其中有什么样去差别呢. 假如说我们编写了一个a.cpp  .我们将a.cpp文件的变量和函数申明在a. ...

  10. 哪个线程执行 CompletableFuture’s tasks 和 callbacks?

    CompletableFuture尽管在2014年的三月随着Java8被提出来,但它现在仍然是一种相对较新潮的概念.但也许这个类不为人所熟知是好事,因为它很容易被滥用,特别是涉及到使用线程和线程池的时 ...