粘自:http://www.jb51.net/css/110652.html

在最外层div加以下样式
height:100%;
overflow:hidden;

其它方法:

Div即父容器不根据内容自适应高度,我们看下面的代码:

代码如下:
<div id="main">
<div id="content"></div>
</div>

当Content内容多时,即使main设置了高度100%或auto。在不同浏览器下还是不能完好的自动伸展。内容的高度比较高了,但容器main的高度还是不能撑开。

我们可以通过三种方法来解决这个问题 
1增加一个清除浮动,让父容器知道高度。请注意,清除浮动的容器中有一个空格。
代码如下:

<div id="main">
<div id="content"></div>
<div style="font: 0px/0px sans-serif;clear: both;display: block"> </div>
</div>

2增加一个容器,在代码中存在,但在视觉中不可见。
代码如下:

<div id="main">
<div id="content"></div>
<div style="height:1px; margin-top:-1px;clear: both;overflow:hidden;"></div>
</div>

3增加一个BR并设置样式为clear:both。

代码如下:
<div id="main">
<div id="content"></div>
<br style="clear:both;" />
</div>

补充:
代码如下:

<div id="main">
<div id="content">
<p>demo1</p>
<p>demo2</p>
<p>demo3</p>
</div>
</div>
#main { border:1px solid #999999; background-color:#CCCCCC; height:100%; overflow:hidden;}
#content { float:left;}

以上三个方法都不是最好的解决方法,因为在程序代码观念中是提倡尽量不要添加无意义的标签代码

子元素div高度不确定时父div高度如何自适应的更多相关文章

  1. CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  2. margin传递,子元素的上下margin会传递给父级

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 解决子元素用css float浮动后父级元素高度自适应高度

    1.在最后一个子元素后面清除浮动 2.父元素加over-flow:hidden;(副作用:子元素定位不能超出父元素的范围) 3.父元素也一样浮动(最笨的方法): 4.子元素使用inline-block ...

  4. 子div设置浮动无法把父div撑开。

    <div class="mainBox"> <div class="leftBox"></div> <div clas ...

  5. 子元素增加margin-top会增加给父元素的问题

    假设我们有如下代码 <div id="father" style="height:400px;width:400px;background:#e4393c;&quo ...

  6. 子div设置float后导致父div无法自动撑开的问题

    子div设置float后会导致父div无法自动撑开 原因:内部的DIV因为float:left之后,就丢失了clear:both和display:block的样式,所以外部的DIV不会被撑开. 以下是 ...

  7. 【转载】设置event.cancelBubble,使触发子元素的onclick不同时触发父元素的onclick

    由于HTML中的对象都是层次结构,比如一个Table包含了多个TR,一个TR包含了多个TD Bubble就是一个事件可以从子节点向父节点传递,比如鼠标点击了一个TD,当前的event.srcEleme ...

  8. 子元素设定margin值会影响父元素

    有些情况下,我们设定父元素下的子元素margin值时,父元素会被影响. 这是个常见问题,而且只在标准浏览器下 (FirfFox.Chrome.Opera.Sarfi)产生问题,IE下反而表现良好. 例 ...

  9. chrome 49 版本bug: flex父元素设置flex:1 , 子元素用height:100%无法充满父元素

    1 <div class="container"> <div class="item"> <div class="ite ...

随机推荐

  1. How and Why Unsafe is Used in Java---reference

    By Peter Lawrey https://www.voxxed.com/blog/2014/12/how-and-why-unsafe-is-used-in-java/ Overview sun ...

  2. 不一样的风格,C#的lambda表达式

    下面贴出代码 using System; using System.Collections.Generic; using System.Linq; using System.Text; using S ...

  3. CentOS 6.7安装Tomcat 7

    1.下载Tomcat 7 wget http://apache.fayea.com/tomcat/tomcat-7/v7.0.67/bin/apache-tomcat-7.0.67.tar.gz 2. ...

  4. linux下的oracle数据库和表空间的导入导出

    由于oracle是安装在linux上面,因此需要oracle的导入导出都是使用命令进行操作.oracle允许整个数据库导入导出和表空间的导入导出. 数据库导入导出 以下操作是在操作系统控制台命令中执行 ...

  5. Modem常用概念

    真实设备的标识,即DEVICE_ID.比如,Android设备是手机,这个DEVICE_ID可以同通过TelephonyManager.getDeviceId()获取,它根据不同的手机设备返回IMEI ...

  6. Ubuntu安装gevent

    今天在安装包的过程中,按照网上的文章,出错,找了很久,最后才安装成功,希望能解决以后大家遇到的问题 Ubuntu安装gevent Gevent是一个基于greenlet的Python的并发框架,以赖于 ...

  7. dumpbin.exe

    有时候我们想查看一个exe引用了哪些动态库,或者我们想看某个动态库包含哪些接口函数,这个时候可以使用dumpbin.exe工具: 1.输入Dumpbin -imports calldll.exe查看它 ...

  8. CentOS PHP-5.4.8 编译安装之初体验

    1. 下载5.4.8 版本 [root@Test data] wget http://museum.php.net/php5/php-5.4.8.tar.gz 2. 解压 [root@Test php ...

  9. Web.xml配置详解之context-param (加载spring的xml,然后初始化bean看的)

    http://www.cnblogs.com/goody9807/p/4227296.html(很不错啊) 容器先加载spring的xml,然后初始化bean时,会为bean赋值,包括里面的占位符

  10. js文件缓存之版本管理

    以前也做过不少项目,但从来就没有把关注的目光投向过js文件缓存.最近终于在毫无意识的情况下跳进了这个大坑. 近几个月来的工作是一个交易系统持续改进项目,迭代发布周期大约为2~3周.最近一次迭代是V16 ...