?最近項目遇到一個布局需求，頭部高度固定，頁面需要剛好占滿一屏幕。

如下示意圖：

?

?

?方法：使用calc

.wrap{position: relative;margin-left: 24px;margin-right: 24px;min-height: calc(100% - 123px); }

calc()說明：

css3 的 calc()函數。這里的意思是設置寬度比100%的寬度少20px。
calc()函數用于動態計算長度值。
calc()函數支持 "+", "-", "*", "/" 運算；
calc()函數使用標準的數學運算優先級規則；

特別注意：

這里是指高度100%的基礎上減去123像素

- 號兩邊要有空格，否則不會生效。

?

轉載于:https://www.cnblogs.com/baiyangyuanzi/p/6567862.html

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的css3 的 calc()函数在布局中的使用----头部高度固定，页面正好占满一屏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。