整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
天学会html+css，第九天固定定位。
Redmi手机电视笔记本。
今天的学习目标是右侧悬浮工具栏用固定定位实现，它是相对于浏览器窗口的定位方式。
·盒子里的内容用a标签，一个图片加一行文字，此时它的位置在最底部。
·然后给它写上固定定位样式，右侧距离0，下面距离70像素，加上背景颜色，看下效果。
·开始给a标签写样式，固定宽高，text-renderin默认下划线去掉，里面内容居中，看下效果。
·图片写样式之前也要加上这行代码，然后让它的尺寸变小一点，并且左右居中，看下效果。
·文字的颜色、大小也调整一下。
·最后给a标签加上边框、内边距，让里面内容往下挪一挪。
到此，今天的学习完成。
为教程，还是先科（啰）普（嗦）一下，然后再进入正题。
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高度，其余部分会随着窗口变化而自适应变化，当主区域内容很多时，该区域会出现滚动条。
【本文结束】
学习过程记录，有需要的朋友可以参考。欢迎一键三连（点赞、关注、评论）。
络发展到了今天，很多朋友对于网站已经不陌生了，但是当我们看网页时你注意到网站的底部了吗？虽然很少人会注意到他，但是如果不在底部的话，会很难看，今天小猿圈web前端讲师就为你介绍网站页面底部固定的方法。
方法一：footer高度固定+绝对定位
html
<div class="dui-container">
<header>Header</header>
<main>Content</main>
<footer>Footer</footer>
</div>
css
.dui-container{
position: relative;
min-height: 100%;
}
main {
padding-bottom: 100px;
}
header, footer{
line-height: 100px;
height: 100px;
}
footer{
width: 100%;
position: absolute;
bottom: 0
}
方法二：在主体content上的下边距增加一个负值等于底部高度
html
<header>Header</header>
<main>Content</main>
<footer>Footer</footer>
css
html, body {
height: 100%;
}
main {
min-height: 100%;
padding-top: 100px;
padding-bottom: 100px;
margin-top: -100px;
margin-bottom: -100px;
}
header, footer{
line-height: 100px;
height: 100px;
}
方法三：将页脚的margin-top设为负数
html
<header>Header</header>
<main>Content</main>
<footer>Footer</footer>
css
main {
min-height: 100%;
padding-top: 100px;
padding-bottom: 100px;
}
header, footer{
line-height: 100px;
height: 100px;
}
header{
margin-bottom: -100px;
}
footer{
margin-top: -100px;
}
方法四： 通过设置flex，将footer的margin-top设置为auto
html
<header>Header</header>
<main>Content</main>
<footer>Footer</footer>
css
body{
display: flex;
min-height: 100vh;
flex-direction: column;
}
header,footer{
line-height: 100px;
height: 100px;
}
footer{
margin-top: auto;
}
方法五： 通过函数calc()计算内容的高度
html
<header>Header</header>
<main>Content</main>
<footer>Footer</footer>
css
main{
min-height: calc(100vh - 200px); /* 这个200px是header和footer的高度 */
}
header,footer{
height: 100px;
line-height: 100px;
}
方法六： 通过设置flexbox，将主体main设置为flex
html
<header>Header</header>
<main>Content</main>
<footer>Footer</footer>
css
body{
display: flex;
min-height: 100vh;
flex-direction: column;
}
main{
flex: 1
}
小猿圈提醒大家合理利用自己每一分每一秒的时间来学习提升自己，不要再用"没有时间“来掩饰自己思想上的懒惰！趁年轻，使劲拼，给未来的自己一个交代！想学习IT编程类知识的可以到小猿圈网站去自学，里面有最新最全的视频以及专业的解答。
*请认真填写需求信息，我们会在24小时内与您取得联系。
