天学会html+css，第九天固定定位。

Redmi手机电视笔记本。

今天的学习目标是右侧悬浮工具栏用固定定位实现，它是相对于浏览器窗口的定位方式。

·盒子里的内容用a标签，一个图片加一行文字，此时它的位置在最底部。

·然后给它写上固定定位样式，右侧距离0，下面距离70像素，加上背景颜色，看下效果。

·开始给a标签写样式，固定宽高，text-renderin默认下划线去掉，里面内容居中，看下效果。

·图片写样式之前也要加上这行代码，然后让它的尺寸变小一点，并且左右居中，看下效果。

·文字的颜色、大小也调整一下。

·最后给a标签加上边框、内边距，让里面内容往下挪一挪。

到此，今天的学习完成。

在我们制作html网页的时候，有时候需要某个元素（比如说div）的滚动条一直在最下方，那么我们该怎么做呢？

先上代码：

window.onload = SetScroll;// 不要括号

function SetScroll(){

//读取需要设定的元素高度

var height=$("#showwindows")[0].scrollHeight;

//设置元素的滚动条位置在高度数据地方就是最下方

$("#showwindows").scrollTop(height);

}

程序执行流程如下：

1、页面加载时自动调用JavaScript中的SetScroll方法；

2、设置height为需要设置滚动条元素的高度；

3、设置元素的滚动条位置为元素高度，就是元素的最下方位置。

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

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高度，其余部分会随着窗口变化而自适应变化，当主区域内容很多时，该区域会出现滚动条。

【本文结束】

学习过程记录，有需要的朋友可以参考。欢迎一键三连（点赞、关注、评论）。