方法一:

height:auto!important; 
height:200px; 
min-height:200px;

ie6并不支持min-height。ie7,opera,火狐没有问题。

方法二:

在浮动的容器后面,父容器结束之前加入一个空的div,并清除浮动。

 
<div class="father">
 
  <div class="son">这里是内容</div>
  <div class="son">这里是内容</div>
  <div class="son">这里是内容</div>
  <div class="son">这里是内容</div>
  <div class="son">这里是内容</div>
  <div class="son">这里是内容</div>
  <div class="son">这里是内容</div>
  <div class="son">这里是内容</div>
 
  <div class="clearfloat"></div>
</div> 
.clearfloat{clear:both;height:0;} 
 
可查看链接 http://www.jb51.net/css/140685.html

CSS-子盒子撑开父盒子,让父盒子的高随内容自适应的更多相关文章

  1. CSS子元素设置margin-top作用于父容器?

    CSS子元素设置margin-top作用于父容器? 原因: In this specification, the expression collapsing margins means that ad ...

  2. CSS 子节点继承父节点(祖先节点)的样式

    CSS 有些属性可以让子节点从父节点或祖先节点继承,文本.字体.列表属性等样式都可以被子节点继承.子节点没有自身的样式,子节点将继承父节点或祖先节点的样式. <ul class="co ...

  3. CSS子元素margin-top对于父元素的影响

    父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. html代码如下 <styl ...

  4. 子元素margin-top为何会影响父元素?

    子元素margin-top为何会影响父元素? 引用地址:https://blog.csdn.net/sinat_27088253/article/details/52954688 2016年10月28 ...

  5. ie6下内容会撑开父级设置好的宽高

    在ie6下,内容的宽高会撑开父级设置好的宽高,在其他浏览器下不会. 会出现的问题是:如果内容宽度大于父级设置好的宽度,内容的最后一个元素会换行显示. 注意:在计算时,务必做到精准,不然可能会产生不必要 ...

  6. jeecms子栏目或者文章页导航父栏目选中解决方法

    jeecms在子栏目或者文章页导航父栏目选中,看例子 <div class="nav"> <ul> [@cms_channel_list ] <li ...

  7. jQuery之防止冒泡事件,冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件。

    冒泡事件就是点击子节点,会向上触发父节点,祖先节点的点击事件. 下面是html代码部分: <body> <div id="content"> 外层div元素 ...

  8. 子页面iframe跨域执行父页面定义的JS方法

    问题需求:父页面与子页面iframe跨域嵌套,子页面要触发父页面所定义的js方法.父子页面的数据传递. 下文中会用到一些文件:父页面: parent.html嵌在父页面的子iframe页面:child ...

  9. 子元素设置margin-top后,父元素跟随下移的问题

    子元素设置margin-top后,父元素跟随下移的问题 <!DOCTYPE html> <html lang="en"> <head> < ...

随机推荐

  1. Java_环境变量

    介绍 第一步:下载JDK 第二步:搭建环境,双击JDK安装程序 第三步:配置环境变量 第四步:检查JDK安装是否成功 介绍: .java 源文件 我们所编写的代码都在这个文件中 .class 字节码文 ...

  2. 【leetcode】Preimage Size of Factorial Zeroes Function

    题目如下: 解题思路:<编程之美>中有一个章节是不要被阶乘吓倒,里面讲述了“问题一:给定一个整数N,那么N的阶乘末尾有多少个0呢?例如N = 10, N! = 362800,N! 的末尾有 ...

  3. bullet学习日记

    最近需要bullet用物理引擎做一个测量类的项目,因为半途接手,物理部分其实已经实现,但犹于对bullet基本不了解,导致相关部分完全改不动,这两天静下心来把物理引擎用法了解了一翻,顺便做点笔记,以便 ...

  4. React Native 中 static的navigationOptions中的点击事件不能用this

    想在某个页面中设置导航栏,title + 左右按钮(按钮上肯定需要有事件) static navigationOptions = ({ navigation, navigationOptions }) ...

  5. mysql FOREIGN KEY约束 语法

    mysql FOREIGN KEY约束 语法 作用:一个表中的 FOREIGN KEY 指向另一个表中的 PRIMARY KEY. DD马达 说明:FOREIGN KEY 约束用于预防破坏表之间连接的 ...

  6. IDEA集成Mybatis打印日志插件

    MyBatis Log Plugin :把 mybatis 输出的sql日志还原成完整的sql语句. 如下图所示,点击Tools>MyBatis Log Plugin 然后运行程序后,就会看到对 ...

  7. uniapp 之navigateTo:fail page 跳转路径不对

    开发uniapp,点击列表跳转详情报错 [system] navigateTo:fail page `/pages/tabBar/index/detail/detail?title=uni-app行业 ...

  8. h5新标签介绍

    html5新增了一些标签 这些标签都是语义标签,可以帮助我们更好的理解,代码中的意思:(都是双标签) 案例: 将语义标签翻译过来为 <div class="header"&g ...

  9. CGI FastCGI WSGI 解析

    我们将服务端程序分为了web服务器和应用程序服务器. web服务器是用于处理HTML文件,让客户可以通过浏览器进行访问.主流的有apache,IIS,nginx,lghttpd等. 应用服务器处理业务 ...

  10. HTTP代理(转)

    个人总结: 两篇文章介绍了https代理的两种方式: ·一种是普通http请求代理 ·一种是通过隧道进行基于tcp的代理 转两篇好文: HTTP 代理原理及实现(一) https://imququ.c ...