高度的自适应（父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. 特殊文件权限（setuid、setgid 和 Sticky 位）

    可执行文件和公共目录可以使用三种特殊类型的权限:setuid.setgid 和 sticky 位.设置这些权限之后,运行可执行文件的任何用户都应采用该可执行文件属主(或组)的 ID. setuid 权 ...

  2. Win7 + vs2012 + cocos2d-x2.2 配置开发环境

    昨天開始打算学习Cocos2d-x,首先肯定是要在自己的电脑上配置开发环境.昨天折腾了一天,以下将自己在当中遇到的问题与解决方法跟大家分享一下.大多数会遇到的问题,我都遇到了....     1.安装 ...

  3. Python-Sublime Text3 激活码

    1.点击菜单-help-Enter License 2.输入以下内容中的一个 —– BEGIN LICENSE —– Michael Barnes Single User License EA7E- ...

  4. QT Unexpected CDB exit 问题的解决办法

    行QT进行debug时,提示 Unexpected CDB exit ,The CBD process terminated.. QtCreator 默认是没有调试器的,因此需要用户额外安装. win ...

  5. Linux系统编程之----》信号

    "===信号========================================================================================= ...

  6. weblogic stuck实验2014-11-14

         以往对weblogic stuck认识是: 1.会造成系统总体慢. 2.在weblogic console中线程监控中会有显示. 3.weblogic使用队列处理线程.隔一段时间会扫描线程队 ...

  7. Java - NIO基础

    1. 概述 现在使用NIO的场景越来越多,很多技术框架都使用NIO技术,比如Tomcat,Jetty,Netty等. 传统IO基于字节流和字符流进行操作,而NIO基于Channel和Buffer进行操 ...

  8. springboot整合docker部署（两种构建Docker镜像方式）--2019-3-5转

    原文:https://www.cnblogs.com/shamo89/p/9201513.html 项目结构 package hello; import org.springframework.boo ...

  9. 从A页面带参数跳转到B页面；进行解析，并显示数据，进行编辑

    A页面跳转时候的地址: parent.layer.open({ type: 2, title:'新建草稿', shadeClose: true, shade: 0.8, scrollbar: fals ...

  10. 解决：std::ostream operator<< should have been declared inside 'xxx'

    用VS的NMAKE构建,不会报错,但是用GNU MAKE构建,就会报错.(尝试删除Toast.h中第24行的声明) 因此在遇到类似的情况的时候,记得不仅class里面要有friend声明,namesp ...