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