css中heigh、min-height和max-height的使用

举报
DevFeng 发表于 2021/01/28 11:04:32 2021/01/28
【摘要】 1、min-height和height同时使用,谁大听谁的2、max-height和height同时使用,虽小听谁的3、height、min-heigth和max-height同时使用,分为以下情况height > max-height > min-height   元素高度:max-heightheight > min-height > max-height   元素高度:min-heig...

1、min-height和height同时使用,谁大听谁的

2、max-height和height同时使用,虽小听谁的

3、height、min-heigth和max-height同时使用,分为以下情况

  • height > max-height > min-height   元素高度:max-height
  • height > min-height > max-height   元素高度:min-height
  • min-height > height > max-height   元素高度:min-height   
  • min-height > max-height > height   元素高度:min-height 
  • max-height > height > min-height   元素高度:height
  • max-height > min-height > height   元素高度:min-height

之前遇到一个使用场景:页面整体绝对定位且有背景颜色时,由于脱离文档流,使得父盒子高度为0,如果设置具体固定高度,在移动端上会出现适配问题,即不同尺寸手机高度不同,背景颜色出现断层,如果同时使用min-height和height,谁大听谁的,min-height:100%,height:固定高度(可以设置为刚好将定位元素包裹住的高度),当手机高度较大时,min-height > height,页面完整一屏,在小屏手机上,height > min-height,一屏放不下,页面滚动,出现滚动条,高度为height

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。