css3讓元素自適應高度


知識點:

viewport:可視窗口,也就是瀏覽器。
vw Viewport寬度, 1vw 等於viewport寬度的1%
vh Viewport高度, 1vh 等於viewport高的的1%

 

calc()使用通用的數學運算規則,但是也提供更智能的功能:

1、使用“+”、“-”、“*” 和 “/”四則運算;
2、可以使用百分比、px、em、rem等單位;
3、可以混合使用各種單位進行計算;
4、表達式中有“+”和“-”時,其前后必須要有空格,如"widht: calc(12%+5em)"這種沒有空格的寫法是錯誤的;
5、表達式中有“*”和“/”時,其前后可以沒有空格,但建議留有空格。
   
例如 :設置div元素的高度為當前窗口高度-100px
     div{
       height: calc(100vh - 100px);     
    }

 

兼容性:支持ie9及以上,移動端可以用的飛起了


免責聲明!

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



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