css样式-内容固定在页面底部，不随滚动条滚动
css样式-内容固定在页面底部，不随滚动条滚动；position: fixed;
·
目录
1、内容固定在页面底部，不随着滚动条滚动
position：
1、【relative】相对定位；2、【absolute】绝对定位；
3、【fixed】固定定位；4、【static】默认值；5、【sticky】粘性定位。
这里设置为fixed，固定定位；
此元素的位置可通过 “left”、“top”、“right”、“bottom"”属性来规定。
不论窗口滚动与否，元素都会固定原位置。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内容固定在页面底部</title>
<style>
/*内容固定在页面底部，不随着滚动条滚动
position设置为fixed，可定位于相对于浏览器窗口的指定坐标。
此元素的位置可通过 “left”、“top”、“right”、“bottom"”属性来规定。
不论窗口滚动与否，元素都会固定原位置。
*/
#floor {
width: 100%; /*宽度为100%*/
height: 70px; /*高度度为70px*/
background-color: #000; /*背景颜色为黑色*/
text-align: center; /*内容居中*/
color:#999; /*字体颜色*/
/*放置的位置设置*/
position: fixed; /*1、【relative】相对定位；2、【absolute】绝对定位；3、【fixed】固定定位；4、【static】默认值；5、【sticky】粘性定位。*/
left: 0px; /*定位：离页面左边0px的位置*/
bottom: 0px; /*定位：离页面底部0px的位置*/
/*top: 92%;*/ /*定位：离页面顶部92%的位置*/
/*border: 1px solid #000;*/
}
</style>
</head>
<body>
<div id="floor">
<br />
需要放置的内容
</div>
</body>
</html>页面效果：
2、添加内容，简单测试是否固定
使用for循环，遍历出超出页面的内容
<script>
for (i = 0;i<50;i++) {
document.write(i + "<br />")
}
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内容固定在页面底部</title>
<style>
/*内容固定在页面底部，不随着滚动条滚动
position设置为fixed，可定位于相对于浏览器窗口的指定坐标。
此元素的位置可通过 “left”、“top”、“right”、“bottom"”属性来规定。
不论窗口滚动与否，元素都会固定原位置。
*/
#floor {
width: 100%; /*宽度为100%*/
height: 70px; /*高度度为70px*/
background-color: #000; /*背景颜色为黑色*/
text-align: center; /*内容居中*/
color:#999; /*字体颜色*/
/*放置的位置设置*/
position: fixed; /*1、【relative】相对定位；2、【absolute】绝对定位；3、【fixed】固定定位；4、【static】默认值；5、【sticky】粘性定位。*/
left: 0px; /*定位：离页面左边0px的位置*/
bottom: 0px; /*定位：离页面底部0px的位置*/
/*top: 92%;*/ /*定位：离页面顶部92%的位置*/
/*border: 1px solid #000;*/
}
</style>
</head>
<body>
<script>
for (i = 0;i<50;i++) {
document.write(i + "<br />")
}
document.write("<br /><br /><br />")/*由于内容会被，遮挡，所以在末尾多加了几个<br />*/
</script>
<div id="floor">
<br />
需要放置的内容
</div>
</body>
</html>页面效果：
内容没有随滚动条滚动
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
9
0- 0
已为社区贡献2条内容
所有评论(0)