为教程，还是先科（啰）普（嗦）一下，然后再进入正题。

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页面白屏问题，并解决它们。不同的问题可能需要不同的解决方法，因此需要耐心和细心地分析和排查。在开发过程中，我们也要时刻关注页面性能，优化页面加载速度，提高用户体验。