首页 > 编程知识 正文

div高度自适应屏幕,css高度自适应怎么实现

时间:2023-05-04 03:54:08 阅读:139746 作者:923

在使元素适应屏幕大小之前,请介绍css的知识点。

元素的边距和绘制属性的值是根据宽度计算的,如果设置为百分比(无论是上边距还是左边距)。

也就是说,在知道纵横比的情况下,css无法确定height的值,但是可以确定padding-top等属性的值。

实现想法:

1、计算长宽比(高/宽),设定为padding-top的值,height设定为0 ) (padding-top支撑元素的高度)。

2、此时,要素的实际内容被向下压入,所以在绝对位置改变其位置。

(视频教程推荐: css视频教程)

实现代码:

html代码:

css代码:

. ac_coupon-wrap {

height: 0;

padding-top: 15.16%;

定位:关系;

. ac_coupon-content {

定位:助手;

top: 0;

width: 100%;

height: 100%;

备份大小: cover;

}

}

推荐教程: css快速入门

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。