Web中固定面板怎么做？用CSS3 calc函數(shù)一行就搞定

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

calc函數(shù)能夠干什么

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

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

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

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

哪些瀏覽器可以使用

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

clac() 已經(jīng)得到普遍支持

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

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

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

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

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

HTML代碼：

<div id="main">主區(qū)域</div>
<div id="bottom">底部區(qū)域</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高度，其余部分會隨著窗口變化而自適應(yīng)變化，當(dāng)主區(qū)域內(nèi)容很多時，該區(qū)域會出現(xiàn)滾動條。

【本文結(jié)束】

學(xué)習(xí)過程記錄，有需要的朋友可以參考。歡迎一鍵三連（點贊、關(guān)注、評論）。

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

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

1. AdminLTE

Github Star 數(shù) 24969 ， Github 地址：

https://github.com/almasaeed2010/AdminLTE

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

2. vue-Element-Admin

Github Star 數(shù) 19546， Github 地址：

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

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

3. tabler

Github Star 數(shù) 15870， Github 地址：

https://github.com/tabler/tabler

構(gòu)建在 BootStrap 4 之上的免費的 HTML 控制面板框架

4. Gentelella

Github Star 數(shù) 15654， Github 地址：

https://github.com/puikinsh/gentelella

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

5. ng2-admin

Github Star 數(shù) 13181， Github 地址：

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

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

6. ant-design-pro

Github Star 數(shù) 12707，Github 地址：

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

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

7. blur-admin

Github Star 數(shù) 9241，Github 地址：

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

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

8. vue-admin

Github Star 數(shù) 8676，Github 地址：

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

基于 Vue 和 Bulma 的控制面板。

9. iview-admin

Github Star 數(shù) 8668，Github 地址：

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

基于 iView 的 Vue 2.0 控制面板。

10. material-dashboard

Github Star 數(shù) 7111，Github 地址：

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

基于 Bootstrap 4 和 Material 風(fēng)格的控制面板。

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

第一步：檢查HTML代碼

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

第二步：檢查CSS文件

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

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

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

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

第三步：檢查JavaScript代碼

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

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

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

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

第四步：排查網(wǎng)絡(luò)請求問題

如果前面的步驟都沒有發(fā)現(xiàn)問題，那么可能是網(wǎng)絡(luò)請求出現(xiàn)了問題。以下是一些排查網(wǎng)絡(luò)請求問題的方法：

1、檢查網(wǎng)絡(luò)連接：確保你的設(shè)備已連接到互聯(lián)網(wǎng)，并且網(wǎng)絡(luò)連接穩(wěn)定。

2、檢查資源加載狀態(tài)：通過瀏覽器開發(fā)者工具的網(wǎng)絡(luò)面板，檢查頁面中的資源加載狀態(tài)。可能存在資源加載失敗或者超時的情況，導(dǎo)致頁面白屏。

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

第五步：優(yōu)化頁面性能

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

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

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

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

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

結(jié)語：

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

在線咨詢

上一篇：CSS 中幾種最常用的水平垂直居中的方法
下一篇：用 CSS 實現(xiàn)傾斜的背景顏色

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商