http://www.yutheme.cn/website/index.php/content/view/39/63.html

div高度自适应是个比较麻烦的问题,在朋友artery那里看到这个文章,帮我解决了不少问题,摘录下来:

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加以下样式

#main {
height:100%;
overflow:hidden;
}      

Div自适应高度的方法的更多相关文章

  1. DIV+CSS左右两列自适应高度的方法

    我们在用DIV+CSS布局网页的时候,必然会遇到左右两列自适应高度的问题,就是左边列的背景会随着右边列内容的增加也相应的增加高度,下面就教大家DIV+CSS左右两列自适应高度的方法. 下面给出最终的效 ...

  2. div自适应高度

    div自适应高度 Div即父容器不根据内容自适应高度,我们看下面的代码: <div id="main"> <div id="content"& ...

  3. 子级用css float浮动 而父级不能自适应高度解决方法

    解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个 ...

  4. Iframe 自适应高度的方法!

    第一种方法:代码简单,兼容性还可以,大家可以先测试下. function SetWinHeight(obj) { var win=obj; if (document.getElementById) { ...

  5. div 自适应高度

    自适应高度 ,设置最小高度:通常情况下,没有设置高度,div默认自适应高度且无最低高度 1 div{ _height:200px; /* css 注解: 仅IE6设别此属性,假定最低高度是200px ...

  6. 设置div自适应高度滚动

    <body> <div id="divc" style="overflow: auto;"> </div> <a id ...

  7. CSS布局自适应高度解决方法

    这是一个比较典型的三行二列布局,每列高度(事先并不能确定哪列的高度)的相同,是每个设计师追求的目标,按一般的做法,大多采用背景图填充.加JS脚本的方法使列的高度相同,本文要介绍的是采用容器溢出部分隐藏 ...

  8. div套div 里面div有浮动 外面div自适应高度

    <div style="background-color:red;"> <div style="float:left;background-color: ...

  9. div 自适应高度 自动填充剩余高度

    方案1: Html: <div class="outer"> <div class="A"> 头部DIV </div> &l ...

随机推荐

  1. 模拟 POJ 1573 Robot Motion

    题目地址:http://poj.org/problem?id=1573 /* 题意:给定地图和起始位置,robot(上下左右)一步一步去走,问走出地图的步数 如果是死循环,输出走进死循环之前的步数和死 ...

  2. POJ1511 Invitation Cards(多源单汇最短路)

    边取反,从汇点跑单源最短路即可. #include<cstdio> #include<cstring> #include<queue> #include<al ...

  3. TYVJ P1037 阶乘统计2 Label:坑

    描述 n的阶乘定义为n!=1*2*3*……*n 如3!=6 n!通常最后会有很多0,如5!=120 最后有一个0,现在统计n!去除末尾的0后,最后k位是多少  输入格式  第一行包括两个数n,k  输 ...

  4. 【BZOJ】1043: [HAOI2008]下落的圆盘(计算几何基础+贪心)

    http://www.lydsy.com/JudgeOnline/problem.php?id=1043 唯一让我不会的就是怎么求圆的周长并QAAQ... 然后发现好神!我们可以将圆弧变成$[0, 2 ...

  5. Noi 2016

    考砸只能说自己弱 Noi不是生活的全部, 人们也不会永远止步于失败. 大家加油 可以+我的qq:582744883

  6. Get the image file(s) some informations,Including the Make,Model,Date/Time,etc

    This is a blog about how to get the image file(s) some informations.Including the Make,Model,Date/Ti ...

  7. MySql Replication配置

    一.前言 Mysql Replication作为读写分离的廉价解决方案,支持一主多备的方式进行数据存储,采用二进制日志传送,目前存在着广泛应用,网上相关概念也比较多,不再重复介绍.引用一张官方提供的R ...

  8. linux 快捷键

    截图: 打印: 全屏截图 alt+打印:窗口截图 shift+打印:区域截图 ctrl+打印:截图到剪贴板 显示桌面: ctrl+super+d 最大化最小化窗口 ctrl+alt+up/down 转 ...

  9. Genymotion填坑之路

    Genymotion是一款android的模拟器,之前用的一台电脑直接装上就可以用,后来换了一台机器,一直报获取不到IP,后来网上各种找方法,偶然发现网上说的是硬件问题: 在BIOS中将CPU的vir ...

  10. [转帖] CvMat,Mat和IplImage之间的转化和拷贝

    原文地址: http://blog.csdn.net/holybin/article/details/17711013 在OpenCV中Mat.CvMat和IplImage类型都可以代表和显示图像. ...