為教程，還是先科（啰）普（嗦）一下，然后再進入正題。

calc函數能夠干什么

CSS3 的 calc() 函數允許我們在屬性值中執行數學計算操作，它支持"+", "-", "*", "/" 運算，遵循標準的數學運算優先級規則。例如，我們可以使用 calc() 指定一個元素的寬度總是比它的父元素寬度小 50px。

.foo {
  width: calc(100% - 50px);
}

這意味著瀏覽器中的值可以更加靈活，能夠響應視口的改變，用在流體布局上簡直就是如虎添翼。calc是英文單詞calculate(計算)的縮寫，是css3的一個新增的功能。

特別需要注意的是：運算符前后都需要保留一個空格，例如：width: calc(100% - 10px)；

哪些瀏覽器可以使用

可以說，calc函數已經得到了瀏覽器廠商的普遍支持，如下圖所示。

對于不支持 calc() 的瀏覽器，整個屬性值表達式將被忽略。不過我們可以對那些不支持 calc()函數的瀏覽器，使用一個固定值作為回退。

.foo {
    width: 90%; /* Fallback for older browsers */
    width: calc(100% - 50px);
}

回到正題：如何實現一個div高度固定，一個div鋪滿剩余屏幕

需求：比如，我們經常需要固定一個操作面板在頁面底部，其它區域占滿屏幕剩余區域并隨視口變化而自適應變化，且可以上下滾動。

分析：我們能夠給要固定的元素設定一個高度，其值為視口的高度減去一個絕對值。那么我們可以做一個上下結構的布局，上部為主區域，下部為底部區域。

HTML代碼：

<div id="main">主區域</div>
<div id="bottom">底部區域</div>

CSS代碼：

body {
  margin: 0;
  color: white;
  text-align: center;
}
#main {
  height: calc(100vh - 50px); /*視口高度 - 50px*/
  overflow-y: auto;
  background-color: blueviolet;
}
#bottom {
  height: 50px;
  background-color: black;
}

效果如下：無論窗口多大，底部始終保持50px高度，其余部分會隨著窗口變化而自適應變化，當主區域內容很多時，該區域會出現滾動條。

【本文結束】

學習過程記錄，有需要的朋友可以參考。歡迎一鍵三連（點贊、關注、評論）。

者：SevDot

來源：www.jianshu.com/p/3bc7404af887

Web 開發中幾乎的平臺都需要一個后臺管理，但是從零開發一套后臺控制面板并不容易，幸運的是有很多開源免費的后臺控制面板可以給開發者使用，那么有哪些優秀的開源免費的控制面板呢？我在 Github 上收集了一些優秀的后臺控制面板，并總結得出 Top 10。

1. AdminLTE

Github Star 數 24969 ， Github 地址：

https://github.com/almasaeed2010/AdminLTE

非常流行的基于 Bootstrap 3.x 的免費的后臺 UI 框架。

2. vue-Element-Admin

Github Star 數 19546， Github 地址：

https://github.com/PanJiaChen/vue-element-admin

一個基于 vue2.0 和 Eelement 的控制面板 UI 框架。

3. tabler

Github Star 數 15870， Github 地址：

https://github.com/tabler/tabler

構建在 BootStrap 4 之上的免費的 HTML 控制面板框架

4. Gentelella

Github Star 數 15654， Github 地址：

https://github.com/puikinsh/gentelella

一個基于 Bootstarp 的免費的后臺控制面板。

5. ng2-admin

Github Star 數 13181， Github 地址：

https://github.com/akveo/ngx-admin

基于 Angular 2, Bootstrap 4 和 Webpack 的后臺管理面板框架。

6. ant-design-pro

Github Star 數 12707，Github 地址：

https://github.com/ant-design/ant-design-pro

開箱即用的中臺前端/設計解決方案

7. blur-admin

Github Star 數 9241，Github 地址：

https://github.com/akveo/blur-admin

基于 Angular 和 Bootstrap 的后臺管理面板框架。

8. vue-admin

Github Star 數 8676，Github 地址：

https://github.com/vue-bulma/vue-admin

基于 Vue 和 Bulma 的控制面板。

9. iview-admin

Github Star 數 8668，Github 地址：

https://github.com/iview/iview-admin

基于 iView 的 Vue 2.0 控制面板。

10. material-dashboard

Github Star 數 7111，Github 地址：

https://github.com/creativetimofficial/material-dashboard

基于 Bootstrap 4 和 Material 風格的控制面板。

網頁開發過程中，我們有時會遇到HTML頁面白屏的問題，即打開網頁時頁面顯示空白，沒有任何內容。這不僅令用戶困惑，也使開發者頭疼不已。本文將分享一些常見的HTML頁面白屏問題解決方法，幫助你快速解決這個問題，讓你的網頁煥然一新！

第一步：檢查HTML代碼

首先，我們需要檢查HTML代碼是否正確。常見的錯誤包括標簽未閉合、標簽嵌套錯誤等。這些錯誤可能會導致頁面無法正常顯示。因此，仔細檢查HTML代碼，確保沒有語法錯誤是解決白屏問題的第一步。

第二步：檢查CSS文件

HTML頁面的樣式通常由CSS文件控制。如果CSS文件中存在錯誤或者無法正常加載，可能會導致頁面白屏。我們可以通過以下步驟檢查CSS文件是否存在問題：

1、檢查CSS文件路徑是否正確：確保CSS文件的路徑正確，并且文件存在于指定的位置。可以通過瀏覽器開發者工具查看網絡面板，檢查CSS文件是否被成功加載。

2、檢查CSS文件語法錯誤：使用CSS驗證工具，如W3C CSS驗證服務，檢查CSS文件是否存在語法錯誤。如果存在錯誤，及時修復。

3、檢查CSS選擇器和樣式規則：檢查CSS文件中的選擇器和樣式規則是否正確。可能存在選擇器與HTML元素不匹配或樣式規則沖突的情況。可以通過逐個注釋掉樣式規則，逐步排查問題。

第三步：檢查JavaScript代碼

JavaScript代碼也可能導致頁面白屏。以下是檢查JavaScript代碼的步驟：

1、檢查JS文件路徑是否正確：與CSS文件類似，確保JS文件的路徑正確，并且文件存在于指定的位置。通過瀏覽器開發者工具查看控制臺面板，檢查是否有JS文件加載錯誤的提示信息。

2、檢查JS代碼語法錯誤：使用JS語法檢查工具，檢查JS代碼是否存在語法錯誤。如果有錯誤，及時修復。

3、檢查JS代碼邏輯錯誤：檢查JS代碼中的邏輯是否正確。可能存在變量未定義、函數未調用或者邏輯錯誤等問題。可以通過調試工具，如瀏覽器開發者工具中的調試器，逐步排查問題。

第四步：排查網絡請求問題

如果前面的步驟都沒有發現問題，那么可能是網絡請求出現了問題。以下是一些排查網絡請求問題的方法：

1、檢查網絡連接：確保你的設備已連接到互聯網，并且網絡連接穩定。

2、檢查資源加載狀態：通過瀏覽器開發者工具的網絡面板，檢查頁面中的資源加載狀態。可能存在資源加載失敗或者超時的情況，導致頁面白屏。

3、檢查服務器配置：如果你使用了服務器端腳本語言，如PHP，檢查服務器配置是否正確。可能存在服務器配置問題導致頁面無法正確渲染。

第五步：優化頁面性能

如果以上方法都沒有解決問題，那么可能是頁面性能問題導致白屏。以下是一些優化頁面性能的方法：

1、壓縮和合并文件：將CSS和JS文件進行壓縮和合并，減少文件的大小和數量，提高頁面加載速度。

2、使用緩存：利用瀏覽器緩存機制，將靜態資源進行緩存，減少服務器的請求次數，提高頁面加載速度。

3、異步加載資源：使用異步加載技術，如異步加載JS文件或使用延遲加載，減少頁面加載時間。

4、減少HTTP請求：減少頁面中的HTTP請求次數等。

結語：

通過以上五個步驟，我們可以逐步排查HTML頁面白屏問題，并解決它們。不同的問題可能需要不同的解決方法，因此需要耐心和細心地分析和排查。在開發過程中，我們也要時刻關注頁面性能，優化頁面加載速度，提高用戶體驗。