div自适应高度
div自适应高度 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>
引用自百度文库,作者:烟雨love2010 http://wenku.baidu.com/link?url=NiPaGqoUWLET5BIKLwpUKCzY6umX06f2AmPaliyNgC_hRsaQ59oPMi8us82qmlrKM_j_H9zKcKaQW4vF6RNE4lCTeJ6-Ebp_QunC95VgxiW
还有一个百度来的设置CSS的方法:
#div{
_height:200px;
min-height:200px;
//能兼容ie6,7,8 ,火狐等浏览器。
}
div自适应高度的更多相关文章
- Div自适应高度的方法
http://www.yutheme.cn/website/index.php/content/view/39/63.html div高度自适应是个比较麻烦的问题,在朋友artery那里看到这个文章, ...
- div 自适应高度
自适应高度 ,设置最小高度:通常情况下,没有设置高度,div默认自适应高度且无最低高度 1 div{ _height:200px; /* css 注解: 仅IE6设别此属性,假定最低高度是200px ...
- 设置div自适应高度滚动
<body> <div id="divc" style="overflow: auto;"> </div> <a id ...
- div 自适应高度 自动填充剩余高度
方案1: Html: <div class="outer"> <div class="A"> 头部DIV </div> &l ...
- div套div 里面div有浮动 外面div自适应高度
<div style="background-color:red;"> <div style="float:left;background-color: ...
- 如何设置div自适应高度
1.给div添加overflow属性 .div{ width:760px; overflow:hidden; } 2.其他的设置height:auto 等我测试没有效果
- 外部div自适应内部标签的高度,设置最小高度、最大高度
一.div自适应高度:在前端开发中经常需要让外层的div自动适应内部标签和内容的高度,内部标签可能是<div>.<ul>.<ol>或者文字等各种内容.造成外层的di ...
- div有最小高度且自适应高度
DIV最小高度且自适应高度 在IE6中,如果子容器的高度超过父容器的时候,父容器会被子容器撑开,所以我们可以直接设置一个height的高度值即可.但是在IE7和firefox就不行了,它不会自动撑 ...
- 解决子级用css float浮动 而父级div没高度不能自适应高度
解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子 ...
随机推荐
- Eclipse代码和xml文件的智能提示
一.代码智能提示 Windows → Preferences → Java→ Editor → Content Assist 将 Auto activation delay(ms): 改为 0 将 A ...
- Spring+ibatis动态管理数据源
Spring动态配置多数据源,即在大型应用中对数据进行切分,并且采用多个数据库实例进行管理,这样可以有效提高系统的水平伸缩性.而这样的方案就会不同于常见的单一数据实例的方案,这就要程序在运行时根据当时 ...
- quartz CronExpression表达式
一个cron表达式有至少6个(也可能7个)有空格分隔的时间元素.按顺序依次为1.秒(0~59)2.分钟(0~59)3.小时(0~23)4.天(月)(0~31,但是你需要考虑你月的天数)5.月(0~11 ...
- linux的基本语法及一些设置
rm -r note.txt //delete网络配置进入 vi /etc/sysconfig/network-scripts/ifcfg-teh0修改配置DEVICE=eth0BOOTPROTO=d ...
- 节日来了发个HTML5红包
效果图: 请关注微信公众号 何问起 , 账号ihewenqi ,或者微信扫描下图二维码: 关注后发送 愚人节 ,或 微信节日红包 ,可以体验效果. 代码如下: <!DOCTYPE html> ...
- 慎用 supportedRuntime
运行环境:win7, net4.5 现象: 无法连接SQL2012数据库,提示连接超时 原因: 真正的原因: 找微软去 解决的办法: 去除多余的supportedRuntime,或者修 ...
- MYSQL基础操作之数据约束与关联查询
一.MYSQL约束 1.默认值约束,当字段没有插入值的时候,mysql自动给该字段分配默认值. 默认值的字段允许为空. 对默认值字段也可以插入null. CREATE TABLE STUDENT( I ...
- webform(十)——图片水印和图片验证码
两者都需要引入命名空间:using System.Drawing; 一.图片水印 前台Photoshuiyin.aspx代码: <div> <asp:FileUpload ID=&q ...
- 实时观察Apache访问情况的工具Apachetop
Linux服务器的负载.进程等信息可以通过top命令查看.而Apache的运转如何实时的观察呢?“tail -f”log文件?这是个好方法,但是太累了! 所以,感谢Chris Elsworth为我们提 ...
- 首页大图淡入淡出效果工具flexslider
网站首页放几张高清大图轮流播放展示是目首页设计的流行做法,虽然woothemes.com已经公布了比较成熟的flexslider工具,但本着造轮子的心态,我也做了一个自己的flexslider,当然我 ...