设置DIV根据内容自动调整高度的三个方法
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根据内容自动调整高度的三个方法的更多相关文章
- 【代码笔记】iOS-UILabel根据内容自动调整高度
一,效果图. 二,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the ...
- ios UIWebView加载HTMLStr图文,关于图片宽高设置,webView内容实际高度的踩坑问题
一.关于UIWebView 与 WKWebView 选取问题 从发布时间看: 2008年7月11日,在新一代iPhone3G正式发售当天,iPhone OS 2.0(iOS 2.0)推出,这时候就有U ...
- iOS开发--UILabel根据内容自动调整高度
写法一:对象方法,传入:字体/最大尺寸. 即可得到宽高, 最大尺寸主要限制宽度,如果是一行就给个{MAXFLOAT,MAXFLOAT};如果是多行就限制X值,Y值随便给 - (CGSize)sizeW ...
- Make div 100% height of browser window/设置div等于浏览器的高度
Viewport-Percentage (or Viewport-Relative) Lengths Viewport-Percentage Lengths: The viewport-percent ...
- C# 在RichTextBox根据内容自动调整高度
private void richTextBox1_ContentsResized(object sender, ContentsResizedEventArgs e) { richTextB ...
- 固定高度div,随内容自动变高css定义方法
*{ font-size:12px; margin:0; padding:0;}方法1:#testBox{border:1px solid #cccccc;padding:5px;width:220p ...
- 设置select下拉框高度的一种方法
这种方法可以设置下拉框最多显示几条栏目,多余的栏目用显示滚动条展示: <select style="position: absolute;z-index: 1;" onmou ...
- .net mvc 设置div的动态部分视图内容 dynamic partial view
示例效果:点击按钮,在div中 显示不同的partial view的内容 $("#btnEdit").click(function () { //动态获取相应的部分视图 var u ...
- 三种方法为QLineEdit添加清除内容按钮
很多时候我们会发现输入的一长串内容不得不全部删除重新输入,这时比起一直按着退格键不放一个清除内容按钮更受欢迎. 今天我将介绍三种为QLineEdit添加清除内容按钮的方法,其中两种方法有较强的功能针对 ...
随机推荐
- test错误记录
1.Caused by: java.io.FileNotFoundException: D:\Program%20Files\Apache%20Software%20Foundation\Tomcat ...
- qtp中vb脚本,经典收藏
1.在脚本运行过程中屏蔽鼠标键盘输入 SystemUtil.BlockInput ‘开始处 这里是你的脚本 SystemUtil.UnblockInput ’结尾处 ----------------- ...
- cmd 下登陆ftp及相关操作
cmd 下登陆ftp及相关操作 2011-08-09 20:34:28| 分类: 小技巧|字号 订阅 一.举例 假设FTP地址为“ 61.129.83.39”(大家试验的时候不要以这个FTP去试,应 ...
- python 输出重定向
使print既打印到终端,又写入文件 class Tee(object): def __init__(self,*files): self.files = files def write(self,o ...
- ubuntu 连接VPN 命令
1 注册MXVPN 2 启动VPN pptpsetup --create mxvpn1 --server xx.xx.xx.xx --username *** --password *** --e ...
- easyui datagrid deleteRow(删除行)的BUG!
转自:http://my.oschina.net/fants/blog/77189项目中又用到easyui 的datagrid做数据展示.功能很强大,很实用,但bug也很多.今天这个就够让人头疼. 如 ...
- Inno Setup入门(十七)——Inno Setup类参考(3)
分类: Install Setup 2013-02-02 11:28 433人阅读 评论(0) 收藏 举报 标签 标签(Label)是用来显示文本的主要组件之一,也是窗口应用程序中最常用的组件之一,通 ...
- ios屏幕
设备 屏幕尺寸 分辨率(pt) Reader 分辨率(px) 渲染后 PPI iPhone 3GS 3.5吋 320x480 @1x 320x480 163 iPhone 4/4s 3.5吋 32 ...
- sqlserver内存释放
由于Sql Server对于系统内存的管理策略是有多少占多少,除非系统内存不够用了(大约到剩余内存为4M左右), Sql Server才会释放一点点内存.所以很多时候,我们会发现运行Sql Serv ...
- Hibernate 系列教程16-二级缓存
pom.xml <dependency> <groupId>org.hibernate</groupId> <artifactId>hibernate- ...