当前位置:首页 > Web开发 > 正文

css中heigh、min

2024-03-31 Web开发

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

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

温馨提示: 本文由Jm博客推荐,转载请保留链接: https://www.jmwww.net/file/web/32770.html