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


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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM