在我们完成项目的时候,都会遇到,让div自适应高度这个效果的实现,那么今天我们就给大家做出俩种情况下怎么实现div自适应高度的效果。
第一种:一定高度内容加多时自适应高度,而内容少时div有一定最小高度;
第二种:没有最小高度,div完全自适应高度。
以下为大家介绍这两种情况与解决方法
一定最小高度,内容加多时自适应高度,而内容少时div有一定最小高度 - top
有一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代码片段:
<div>200高度能装下这点内容,设置最小高度200px</div>
<div>设置最小高度200px<br />
而内容多,超出200px高度限制,div自适应高度<br />
<br />
案例占位<br />
案例占位<br />
案例占位<br />
案例占位<br />
案例占位<br />
案例占位<br />
案例占位<br />
案例占位<br />
案例占位<br />
案例占位<br />
案例占位<br />
案例占位<br />
案例占位
</div>
css默认自适应高度
当我们不对div设置固定高度或不设置css高度样式,其div盒子默认是自适应高度。
相信看了这些案例你已经掌握了方法,更多精彩请关注其它相关文章!
相关阅读:
最新的js面试题解析
原生js的常用方法整理
最新的js面试题解析
以上就是怎样让div自适应高度的详细内容。