在我们完成项目的时候，都会遇到，让div自适应高度这个效果的实现，那么今天我们就给大家做出俩种情况下怎么实现div自适应高度的效果。
第一种：一定高度内容加多时自适应高度，而内容少时DIV有一定最小高度；
第二种：没有最小高度，DIV完全自适应高度。
以下为大家介绍这两种情况与解决方法
一定最小高度，内容加多时自适应高度，而内容少时DIV有一定最小高度 – TOP
有一DIV盒子,默认高度为200px,当DIV里内容多余并超出限定高度时,DIV自适应高度, 要求使用纯CSS+DIV,不需要JS,兼容火狐浏览器
1、回答与解释：
_火狐浏览器:200px; /* css 注解： 仅IE6设别此火狐浏览器，假定最低高度是200px ，设置高度200px，内容超出后IE6会自动撑高设定高度 */
火狐浏览器:200px; /* css火狐浏览器： css最小高度为200px支持所有浏览器，IE6浏览器除外 */
这个设置，ie6,7,8 ,9,10,火狐等都能兼容
2、具体设置代码：
div{ _height:200px; min-height:200px /* css 注释：两个放置不分前后顺序，兼容所有浏览器 */ }
登录后复制
3、CSS最小高度与自适应高度并存案例
我们设置2个DIV盒子，最小高度均为200px，当内容较少时DIV盒子的最小高度为200px,当内容比较多超出高度能装下时，DIV盒子自适应高度，为了便于观察与参考分析，我们统一设置宽度为100px,一个黑色1px CSS边框。
CSS代码如下：
div{_height:200px; min-height:200px; border:1px solid #000; width:100px} /* css注释：设置最小高度，border边框，宽度 */ HTML代码片段：200高度能装下这点内容，设置最小高度200px 设置最小高度200px
而内容多，超出200px高度限制，DIV自适应高度
案例占位
案例占位
案例占位
案例占位
案例占位
案例占位
案例占位
案例占位
案例占位
案例占位
案例占位
案例占位
案例占位
登录后复制
CSS默认自适应高度
当我们不对DIV设置固定高度或不设置CSS高度样式，其DIV盒子默认是自适应高度。
相信看了这些案例你已经掌握了方法，更多精彩请关注【创想鸟】火狐浏览器相关文章！
相关阅读：
火狐浏览器
火狐浏览器
火狐浏览器
以上就是怎样让DIV自适应高度的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3194754.html
