这篇文章主要介绍“css怎么设置div自适应高度”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“css怎么设置div自适应高度”文章能帮助大家解决问题。
创新互联专注为客户提供全方位的互联网综合服务,包含不限于成都做网站、成都网站建设、朔城网络推广、微信小程序开发、朔城网络营销、朔城企业策划、朔城品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;创新互联为所有大学生创业者提供朔城建站搭建服务,24小时服务热线:18980820575,官方网址:www.cdcxhl.com
有一DIV盒子,默认高度为200px,当DIV里内容多余并超出限定高度时,DIV自适应高度, 要求使用纯CSS+DIV,不需要JS,兼容火狐浏览器
1、回答与解释:
_height:200px; /* css 注解: 仅IE6设别此属性,假定最低高度是200px ,设置高度200px,内容超出后IE6会自动撑高设定高度 */ min-height: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自适应高度
案例占位
案例占位
案例占位
案例占位
案例占位
案例占位
案例占位
案例占位
案例占位
案例占位
案例占位
案例占位
案例占位
4、在浏览器案例截图
当我们不对DIV设置固定高度或不设置CSS高度样式,其DIV盒子默认是自适应高度。
关于“css怎么设置div自适应高度”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注创新互联行业资讯频道,小编每天都会为大家更新不同的知识点。