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

标签：bsp   颜色   出现   绝对定位   使用   情况   滚动条   完整   max   

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的使用

标签：bsp   颜色   出现   绝对定位   使用   情况   滚动条   完整   max   

原文地址：https://www.cnblogs.com/xldbk/p/12114686.html