Div即父容器在Firefox、Chrome、Safari中不会根据内容自动调节高度,我们看下面的HTML代码:

<divid="main"><divid="content"></div></div> 

当Content内容很多时,即使main设置了高度100%或auto。在除IE外的其他浏览器中还是不能完好的自动伸展。也就是说,内容的高度容器main的高度还是没有自动撑开。

我们有三种方法可以解决这个问题。

一,增加一个清除浮动,让父容器知道高度。请注意,清除浮动的容器中有一个空格。Html代码如下:

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

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

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

三,增加一个BR并设置样式为clear:both。Html代码如下:

<divid="main"><divid="content"></div><brstyle="clear:both;"/></div> 

设置DIV根据内容自动调整高度的三个方法的更多相关文章

  1. 【代码笔记】iOS-UILabel根据内容自动调整高度

    一,效果图. 二,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the ...

  2. ios UIWebView加载HTMLStr图文,关于图片宽高设置,webView内容实际高度的踩坑问题

    一.关于UIWebView 与 WKWebView 选取问题 从发布时间看: 2008年7月11日,在新一代iPhone3G正式发售当天,iPhone OS 2.0(iOS 2.0)推出,这时候就有U ...

  3. iOS开发--UILabel根据内容自动调整高度

    写法一:对象方法,传入:字体/最大尺寸. 即可得到宽高, 最大尺寸主要限制宽度,如果是一行就给个{MAXFLOAT,MAXFLOAT};如果是多行就限制X值,Y值随便给 - (CGSize)sizeW ...

  4. Make div 100% height of browser window/设置div等于浏览器的高度

    Viewport-Percentage (or Viewport-Relative) Lengths Viewport-Percentage Lengths: The viewport-percent ...

  5. C# 在RichTextBox根据内容自动调整高度

    private void richTextBox1_ContentsResized(object sender, ContentsResizedEventArgs e)   {   richTextB ...

  6. 固定高度div,随内容自动变高css定义方法

    *{ font-size:12px; margin:0; padding:0;}方法1:#testBox{border:1px solid #cccccc;padding:5px;width:220p ...

  7. 设置select下拉框高度的一种方法

    这种方法可以设置下拉框最多显示几条栏目,多余的栏目用显示滚动条展示: <select style="position: absolute;z-index: 1;" onmou ...

  8. .net mvc 设置div的动态部分视图内容 dynamic partial view

    示例效果:点击按钮,在div中 显示不同的partial view的内容 $("#btnEdit").click(function () { //动态获取相应的部分视图 var u ...

  9. 三种方法为QLineEdit添加清除内容按钮

    很多时候我们会发现输入的一长串内容不得不全部删除重新输入,这时比起一直按着退格键不放一个清除内容按钮更受欢迎. 今天我将介绍三种为QLineEdit添加清除内容按钮的方法,其中两种方法有较强的功能针对 ...

随机推荐

  1. test错误记录

    1.Caused by: java.io.FileNotFoundException: D:\Program%20Files\Apache%20Software%20Foundation\Tomcat ...

  2. qtp中vb脚本,经典收藏

    1.在脚本运行过程中屏蔽鼠标键盘输入 SystemUtil.BlockInput ‘开始处 这里是你的脚本 SystemUtil.UnblockInput ’结尾处 ----------------- ...

  3. cmd 下登陆ftp及相关操作

    cmd 下登陆ftp及相关操作 2011-08-09 20:34:28|  分类: 小技巧|字号 订阅 一.举例 假设FTP地址为“ 61.129.83.39”(大家试验的时候不要以这个FTP去试,应 ...

  4. python 输出重定向

    使print既打印到终端,又写入文件 class Tee(object): def __init__(self,*files): self.files = files def write(self,o ...

  5. ubuntu 连接VPN 命令

    1  注册MXVPN 2 启动VPN  pptpsetup --create mxvpn1 --server xx.xx.xx.xx --username *** --password *** --e ...

  6. easyui datagrid deleteRow(删除行)的BUG!

    转自:http://my.oschina.net/fants/blog/77189项目中又用到easyui 的datagrid做数据展示.功能很强大,很实用,但bug也很多.今天这个就够让人头疼. 如 ...

  7. Inno Setup入门(十七)——Inno Setup类参考(3)

    分类: Install Setup 2013-02-02 11:28 433人阅读 评论(0) 收藏 举报 标签 标签(Label)是用来显示文本的主要组件之一,也是窗口应用程序中最常用的组件之一,通 ...

  8. ios屏幕

    设备 屏幕尺寸 分辨率(pt) Reader 分辨率(px) 渲染后 PPI iPhone 3GS 3.5吋 320x480 @1x 320x480   163 iPhone 4/4s 3.5吋 32 ...

  9. sqlserver内存释放

    由于Sql Server对于系统内存的管理策略是有多少占多少,除非系统内存不够用了(大约到剩余内存为4M左右),  Sql Server才会释放一点点内存.所以很多时候,我们会发现运行Sql Serv ...

  10. Hibernate 系列教程16-二级缓存

    pom.xml <dependency> <groupId>org.hibernate</groupId> <artifactId>hibernate- ...