怎样让DIV自适应高度


本文摘自PHP中文网,作者php中世界最好的语言,侵删。

在我们完成项目的时候,都会遇到,让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、具体设置代码:

1

2

3

4

5

div{

_height:200px;

min-height:200px

/* css 注释:两个放置不分前后顺序,兼容所有浏览器 */

}

3、CSS最小高度与自适应高度并存案例

我们设置2个DIV盒子,最小高度均为200px,当内容较少时DIV盒子的最小高度为200px,当内容比较多超出高度能装下时,DIV盒子自适应高度,为了便于观察与参考分析,我们统一设置宽度为100px,一个黑色1px CSS边框。

CSS代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

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盒子默认是自适应高度。


相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

相关阅读:

最新的JS面试题解析

原生js的常用方法整理

最新的JS面试题解析

以上就是怎样让DIV自适应高度的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

怎样让移动端的网页内容自适应

css怎么设置最大高度

怎样实现手机自适应网页的大小

html图片的img标签怎样使用

在web里如何设置iframe自适应

插入表单时怎样处理form上下空出一行

怎样让div自适应高度

毛毛虫爬行动画怎样实现

html的文字图片怎样垂直居中

html5实现移动页面自适应手机屏幕的方法

更多相关阅读请进入《高度》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...