css3属性选择器怎么书写代码（Web中固定面板怎么做）
作为教程，还是先科（啰）普（嗦）一下，然后再进入正题。
calc函数能够干什么CSS3 的 calc() 函数允许我们在属性值中执行数学计算操作，它支持" ", "-", "*", "/" 运算，遵循标准的数学运算优先级规则。例如，我们可以使用 calc() 指定一个元素的宽度总是比它的父元素宽度小 50px。
.foo {
width: calc(100% - 50px);
}
这意味着浏览器中的值可以更加灵活，能够响应视口的改变，用在流体布局上简直就是如虎添翼。calc是英文单词calculate(计算)的缩写，是CSS3的一个新增的功能。
特别需要注意的是：运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
哪些浏览器可以使用可以说，calc函数已经得到了浏览器厂商的普遍支持，如下图所示。
clac() 已经得到普遍支持
对于不支持 calc() 的浏览器，整个属性值表达式将被忽略。不过我们可以对那些不支持 calc()函数的浏览器，使用一个固定值作为回退。
.foo {
width: 90%; /* Fallback for older browsers */
width: calc(100% - 50px);
}
需求：比如，我们经常需要固定一个操作面板在页面底部，其它区域占满屏幕剩余区域并随视口变化而自适应变化，且可以上下滚动。
分析：我们能够给要固定的元素设定一个高度，其值为视口的高度减去一个绝对值。那么我们可以做一个上下结构的布局，上部为主区域，下部为底部区域。
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高度，其余部分会随着窗口变化而自适应变化，当主区域内容很多时，该区域会出现滚动条。
【本文结束】
学习过程记录，有需要的朋友可以参考。欢迎一键三连（点赞、关注、评论）。
,免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
