關於height:100%和height:100vh的區別

vh就是當前屏幕可見高度的1%，也就是說

height:100vh == height:100%;

但是當元素沒有內容時候，設置height:100%，該元素不會被撐開，此時高度為0，

但是設置height:100vh，該元素會被撐開屏幕高度一致。

vh/vw 
vh: 相對於視窗的高度, 視窗被均分為100單位的vh; 
vw: 相對於視窗的寬度, 視窗被均分為100單位的vw;

vmax: 相對於視窗的寬度或高度中較大的那個。其中最大的那個被均分為100單位的vmax; 
vmin: 相對於視窗的寬度或高度中較小的那個。其中最小的那個被均分為100單位的vmin; 
視區所指為瀏覽器內部的可視區域大小， 
即window.innerWidth/window.innerHeight大小，不包含任務欄標題欄以及底部工具欄的瀏覽器區域大小。

calc 
calc是英文單詞calculate(計算)的縮寫，是css3的一個新增的功能，用來指定元素的長度。比如說，你可以使用calc()給元素的border、margin、pading、font-size和width等屬性設置動態值。為何說是動態值呢?因為我們使用的表達式來得到的值。不過calc()最大的好處就是用在流體布局上，可以通過calc()計算得到元素的寬度。

calc是 css3提供的一個在css文件中計算值的函數：

• 用於動態計算長度值。
• 需要注意的是，運算符前后都需要保留一個空格，例如：width: calc(100% - 10px)；
• 任何長度值都可以使用calc()函數進行計算；
• calc()函數支持 “+”, “-“, “*”, “/” 運算；
• calc()函數使用標准的數學運算優先級規則；

     
     
     
             
 
              
 
               
 
                
 
               
 
               
 
                
 
                 calc( 
                 100vh - 
                 10px) 表示整個瀏覽器窗口高度減去 
                 10px的大小 
                
 
               
 
              
 
               
 
                
 
               
 
               
 
                
 
                 calc( 
                 100vw - 
                 10px) 表示整個瀏覽器窗口寬度減去 
                 10px的大小