兔源码网 - 专注DZ模版分享、DZ插件分享!

 找回密码
 立即注册
PS教程

css div自适应高度height

[复制链接]
tuyuanma 发表于 2016-9-7 14:08:20 | 显示全部楼层 |阅读模式
温馨提醒:禁止内容附带广告图片、二维码图片,否则将在不通知情况下永久禁言账号!
欢迎加入兔源码站长交流群,您的加入是我们前行的动力!

DZ站长建站交流群:493651246

[ 温馨提示:点击上方群文字,可快速加入QQ群 ]


DIVCSS5为大家介绍两种情况下自适应高度样式设置与解决。
第一种:一定高度内容加多时自适应高度,而内容少时DIV有一定最小高度;
第二种:没有最小高度,DIV完全自适应高度。
以下为大家介绍这两种情况与解决方法

一、一定最小高度,内容加多时自适应高度,而内容少时DIV有一定最小高度
有一DIV盒子,默认高度为200px,当DIV里内容多余并超出限定高度时,DIV自适应高度, 要求使用纯CSS+DIV,不需要JS,兼容火狐浏览器

1、回答与解释:
  1. _height:200px; /* css 注解: 仅IE6设别此属性,假定最低高度是200px ,设置高度200px,内容超出后IE6会自动撑高设定高度 */
  2. min-height:200px; /* css注释: css最小高度为200px支持所有浏览器,IE6浏览器除外 */
复制代码
这个设置,ie6,7,8 ,9,10,火狐等都能兼容

2、具体设置代码:
  1. div{
  2. _height:200px;
  3. min-height:200px
  4. /* css 注释:两个放置不分前后顺序,兼容所有浏览器 */
  5. }
复制代码
3、CSS最小高度与自适应高度并存案例
我们设置2个DIV盒子,最小高度均为200px,当内容较少时DIV盒子的最小高度为200px,当内容比较多超出高度能装下时,DIV盒子自适应高度,为了便于观察与参考分析,我们统一设置宽度为100px,一个黑色1px CSS边框。
CSS代码如下:
  1. div{_height:200px; min-height:200px; border:1px solid #000; width:100px}
  2. /* css注释:设置最小高度,border边框,宽度 */
复制代码
HTML代码片段:
  1. <div>200高度能装下这点内容,设置最小高度200px</div>
  2. <div>设置最小高度200px<br />
  3. 而内容多,超出200px高度限制,DIV自适应高度<br />
  4. <br />

  5. 案例占位<br />
  6. 案例占位<br />
  7. 案例占位<br />
  8. 案例占位<br />
  9. 案例占位<br />
  10. 案例占位<br />
  11. 案例占位<br />
  12. 案例占位<br />
  13. 案例占位<br />
  14. 案例占位<br />
  15. 案例占位<br />
  16. 案例占位<br />
  17. 案例占位
  18. </div>
复制代码
4、在浏览器案例截图
1.jpg
css自适应高度案例截图

二、CSS默认自适应高度
当我们不对DIV设置固定高度或不设置CSS高度样式,其DIV盒子默认是自适应高度。

三、总结
我们不对DIV设置高度样式,默认情况下是自适应高度,当我们需要设置一个CSS最小高度时,所有浏览器都支持DIV盒子最小高度演示,但IE6不支持min-height样式,我们就需要设置针对IE6的css hack实现,或去了解ie6支持min-width max-width,ie6支持min-height max-height。

版权声明
1、转摘或引用本站内容资源须注明原网址,并标明本站网址(兔源码www.tuyuanma.com);
2、对于转摘或引用本站内容资源而引起的民事纠纷、行政处罚或其他损失,本站不承担责任;
3、对于不遵守本声明或其他违法、恶意使用本站内容者,本站保留其追究法律责任的权利。




自动排版 | 高级模式
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

兔源码网 ( 赣ICP备17001544号 公网安备36112102000036号 )

兔源码 QQ交流群:493651246  GMT+8, 2018-12-10 07:38
←站长统计工具 查看密码:tuyuanma

兔源码DZ模板下载 站长邮箱:tuyuanma@qq.com 站长QQ:3197813386 网站地图

© 2001-2013 本站内容皆来自互联网及用户分享,如需删除请提供软著或商标证书。

     
快速回复 返回顶部 返回列表