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自适应高度的更多相关文章

  1. Div自适应高度的方法

    http://www.yutheme.cn/website/index.php/content/view/39/63.html div高度自适应是个比较麻烦的问题,在朋友artery那里看到这个文章, ...

  2. div 自适应高度

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

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

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

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

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

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

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

  6. 如何设置div自适应高度

    1.给div添加overflow属性 .div{ width:760px; overflow:hidden; } 2.其他的设置height:auto 等我测试没有效果

  7. 外部div自适应内部标签的高度,设置最小高度、最大高度

    一.div自适应高度:在前端开发中经常需要让外层的div自动适应内部标签和内容的高度,内部标签可能是<div>.<ul>.<ol>或者文字等各种内容.造成外层的di ...

  8. div有最小高度且自适应高度

    DIV最小高度且自适应高度   在IE6中,如果子容器的高度超过父容器的时候,父容器会被子容器撑开,所以我们可以直接设置一个height的高度值即可.但是在IE7和firefox就不行了,它不会自动撑 ...

  9. 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子 ...

随机推荐

  1. spring/spring boot/spring cloud开发总结

    背景        针对RPC远程调用,都在使用dubbo.dubbox等,我们也是如此.由于社区暂停维护.应对未来发展,我们准备尝试新技术(或许这时候也不算什么新技术了吧),选择使用了spring ...

  2. java 开发模式

    Java-开发模式 Java Web开发方案有多种,这里列举一些经典的开发模式进行横向比较JSP+JAVABEAN开发模式:    特点:该模式将业务逻辑与页面表现进行分离,在一定程度上增加了程序的可 ...

  3. PHP数组的基础知识

  4. getRequestDispatcher()与sendRedirect()的区别

    1.request.getRequestDispatcher()是请求转发,前后页面共享一个request ; response.sendRedirect()是重新定向,前后页面不是一个request ...

  5. 后端Java工程师常用JavaScript_DOM

    JavaScript [1]事件 ①用户操作网页或者浏览器所发生的交互行为称为事件.比如:点击按钮,最小化窗口,修改文本框内容等. ②JS为我们定义许多浏览器中的事件.比如:单击(onclick).双 ...

  6. sed的应用

    h3 { color: rgb(255, 255, 255); background-color: rgb(30,144,255); padding: 3px; margin: 10px 0px } ...

  7. 浅谈Android编码规范及命名规范

    前言: 目前工作负责两个医疗APP项目的开发,同时使用LeanCloud进行云端配合开发,完全单挑. 现大框架已经完成,正在进行细节模块上的开发 抽空总结一下Android项目的开发规范:1.编码规范 ...

  8. 慎用mutableCopy

    因为逻辑需要,我在present到一个页面时,将一个存放uiimage的数组mutablecopy了过去(因为再返回的时候防止对数组做了改动),时间长了也忘了这事儿,后来发现添加多张图片上传时,app ...

  9. 使用gulp解决外部编辑器修改Eclipse文件延迟更新的问题

    本人前端用惯了Hbuilder,修改了eclipse项目中的文件后,由于是外部编辑器修改过的,eclipse不会自动部署更新,一般按F5刷新项目,或者在 preferences > genera ...

  10. 基于英特尔® 至强™ 处理器 E5 产品家族的多节点分布式内存系统上的 Caffe* 培训

    原文链接 深度神经网络 (DNN) 培训属于计算密集型项目,需要在现代计算平台上花费数日或数周的时间方可完成. 在最近的一篇文章<基于英特尔® 至强™ E5 产品家族的单节点 Caffe 评分和 ...