实页面中顶部和底部的固定条，滚动时依然固定，固定定位的使用

篇文章带领大家制作了一个轮播图的界面，本篇文章小海老师带领大家利用固定定位技术（fixed）制作一个在页面的顶端和底端固定的内容条。本文属于前端开发的初级教程，适合于刚刚开始接触CSS技术的学习者。

【技术等级】初级

【承接文章】《利用CSS制作轮播图界面，巧妙使用定位属性，position的强大应用》

希望收藏了我写的文章的你同时可以关注一下“小海前端”，因为这些文章都是连载的，并且是经过我系统的归纳过的。

本文以动手实践为主，希望跟着学的同学们按照下面所讲的步骤一步一步的操作一下。前端开发注重实践操作，只要你按照小海老师所讲的步骤操作，一定能够学会固定条在页面中的做法。如果能抽出时间多做几次，熟能生巧，相信你会从中学习到在页面中设置固定定位的一类使用方式。

一、我们要做的界面展示：

页面固定条案例界面展示

本案例比较简单，旨在向广大学习者说明“固定定位的使用”。从图中可以看出，页面中有一些图片。图片总共安排了6张，一行显示2张。这样做的目的是为了让页面产生垂直滚动条。同学们也可以根据个人爱好自行选择图片内容和张数。

在页面的顶端和底端有两个通栏的内容条。上方的内容条显示“宇宙美图欣赏 >>”字样，背景颜色为灰色。下方的内容条显示一端关于“宇宙”的文字解释。背景颜色为灰色并且带有一定的透明效果。当拖动页面垂直滚动条时，这两个内容条依然固定在可见页面的顶部和底部。

整体分析，页面中有以下三个部分组成：

图片的容器对象，设置该对象的id属性为images。
顶部的固定条，设置该对象的id属性为topDiv。
底部的固定条，设置该对象的id属性为bottomDiv。

这三部分的HTML代码如下所示：

<div id=”topDiv”></div>
<div id=”images”></div>
<div id=”bottomDiv”></div>

二、页面中固定元素实现的原理：

当希望在页面中具备不跟随滚动条滚动的对象时，我们称该对象为固定元素。

固定元素的实现是使用position属性，取值为fixed来完成的。

三、实现页面中的图片：

首先，让我们一起来实现页面中的图片。这部分只需要在id属性取值为images的容器中添加准备好的6张图片。其HTML代码如下所示。

<div id="images">
<img src="images/01.jpg" />
<img src="images/02.jpg" />
<img src="images/03.jpg" />
<img src="images/04.jpg" />
<img src="images/05.jpg" />
<img src="images/06.jpg" />
</div>

这里假设图片的宽度为600px，那么我们就将盛放这些图片的容器#images的宽度设置为1300px，是两张图片的宽度在略大一些。因为图片是内联元素，所以它们应该在一行内显示。由于容器的宽度只允许盛放两张图片，所以剩余的图片自动换行了。

#images容器的CSS代码如下所示。

#images{
width:1300px; height:auto;
margin:0 auto;
}

四、实现顶部的固定条：

顶部的固定条是通栏的，因此外部的容器（即#topDiv）的宽度应该设置为100%。这里高度设置为40px。为了让通栏中显示的内容仍然在页面的中部，并且限制在1300px的宽度范围内，我们需要在#topDiv容器中在制作一个<div></div>标记对，我们将这个div标记对的class属性设置为topDivNr，表示是#topDiv的内容。在这个容器中输入顶部固定条的文本内容。

HTML代码如下所示。

<div id="topDiv">
<div class="topDivNr"> 宇宙美图欣赏 >> </div>
</div>

CSS代码如下所示。

#topDiv{
width:100%; height:40px;
background-color: #676767;
position:fixed;
top:0;
}
#topDiv .topDivNr{
width:1300px; height:40px;
margin:0 auto;
color:#ffffff;
line-height: 40px;
}

五、实现底部的固定条：

底部的固定条和顶部的固定条的实现方式是相同的，所不同的是固定的位置不一样。同样是在fixed固定定位的基础上，顶部固定条采用top:0;的CSS位置属性定位在顶部，而底部固定条采用bottom:0;的CSS位置属性定位在底部。

#bottomDiv的CSS代码如下所示。

#bottomDiv{
width:100%; height:150px;
background-color: rgba(0,0,0,0.5); //实现背景透明效果
position:fixed;
bottom:0;
color:#ffffff;
}

内部文本的实现依然采用在#bottomDiv容器中再添加一个<div></div>容器的方法，该容器的class属性命名为bottomDivNr。然后将该容器内部分为两部分，左部分书写标题“宇宙”，右部分书写文本内容。其HTML代码如下所示。

<div id="bottomDiv">
<div class="bottomDivNr">
<div class="bt">宇宙</div>
<div class="nr">文本内容……</div>
</div>
</div>

该段HTML代码的CSS样式如下所示。

#bottomDiv .bottomDivNr{
width:1300px; height:150px;
margin:0 auto;
text-align: left;
}
#bottomDiv .bottomDivNr .bt{
width:120px;
font-size: 50px;
float:left;
text-align: center;
}
#bottomDiv .bottomDivNr .nr{
width:950px;
font-size:14px;
float:left;
text-indent: 28px;
line-height: 24px;
text-align: justify;
margin-top:10px;
}

整个项目的完整CSS代码如下所示。

完整的CSS代码

文章预告

下一篇文章中，小海老师将为大家讲解浮动属性。浮动属性是流式定位的重要属性，承担了大部分传统布局的功能。希望广大前端学习者千万不要错过！

小海教材

如果大家希望得到更加全面的关于HTML和CSS技术讲解的内容，可以私信我，我会免费将小海老师自己编写的HTML和CSS的PDF教材发给你，帮助你在前端开发的道路上阔步前行。

小海声明

在头条上发表的这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章，逐步学到一定的知识，甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验，每写一篇时我都尽量把握好措辞，用简单易懂的语言描述，同时精心设计版面，让版面更加丰富，激发阅读兴趣。所以，每一篇文章可能篇幅不长，但是都要耗费小海老师很久的时间。

希望收藏了我写的文章的你同时可以关注一下“小海前端”，因为这些文章都是连载的，并且是经过我系统的归纳过的。

关注“小海前端”，我会继续为大家奉上更加深入的前端开发文章，也希望更多的初学者跟着学下去，我们共同将前端开发的路努力坚持的走下去。

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

Redmi手机电视笔记本。

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

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

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

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

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

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

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

到此，今天的学习完成。

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

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);
}

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

【本文结束】

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

在线咨询

上一篇：html页面数字滚动效果
下一篇：HTML <label> 标签

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商