高度的自适应（父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. windows下检測软件的网络连接

    首先打开任务管理器选中你要查看的应用.右键转到进程 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGFwZW5nMDExMg==/font/5a6L5L2 ...

  2. ACE中静态实例管理方式

    ACE中的很多类使用了单例模式,为了便于管理单例对象,ACE使用了一个组件——ACE_Framework_Component来专门管理. 我们以ACE_Reactor这个单例类的创建和释放为例. 1. ...

  3. javascript对于0的解读

      CreateTime--2017年6月29日10:36:01Author:Marydon javascript对于0的解读 1.0与“0” 1.1 判断0与"0"是否相等 测试 ...

  4. iOS-使用添加的花样字体

    代码地址如下:http://www.demodashi.com/demo/11501.html 项目需求中, 有时候有些金额利率等这些不用系统默认字体展现, 而需要着重突出展示! 一.项目截图及效果截 ...

  5. 点击button触发onclick事件判空后依旧自动跳转

    这是一个前端的问题. 其中判断字符串为空的脚本代码是这样的: var remark = $("#Remark").val(); //判空.注意:var reg = /空格/g; v ...

  6. 关于Xcode正确运行swift多线程

    想跳过废话直接看解决方案的可以点击这里直接跳转,我这人写博客喜欢瞎逼逼. 还有一些我看过的不错的多线程资料,在此给出链接,点击这里直接跳转查看. 近来为了做操作系统课程设计,不得不去学习了下多线程. ...

  7. Ooui：在浏览器中运行.NET应用 Ooui.Wasm：浏览器中的.NET

    在过去数年中,桌面应用开发人员一直处境艰难,因为人们的主要关注点聚焦于Web和移动应用.由于Microsoft未来Windows平台的计划未定,并且UWP应用也没有突破性进展,因此技术落伍的责任也不应 ...

  8. Ant—使用Ant构建简单Java项目（三）

    博客<Ant-使用Ant构建简单Java项目(二)>我们简化了运行Test类中main方法须要运行的命令,本博客来介绍一下如何使build.xml文件和当中使用property标签定义的属 ...

  9. jsp自己主动编译机制

    总的来说,Jasper的自己主动检測实现的机制比較简单,依靠某后台线程不断检測JSP文件与编译后的class文件的最后改动时间是否同样,若同样则觉得没有改动.但倘若不同则须要又一次编译.实际上因为在T ...

  10. unity，set ugui rectTransform anchor by script

    如果想用代码实现与下面面板相同的功能 试验可知改变上面选项下面四个值也随之变化: 所以说明二者是一回事儿. 因此,只要通过代码修改RectTransform的anchorMax和anchorMin成员 ...