目录
1、内容固定在页面底部，不随着滚动条滚动
2、添加内容，简单测试是否固定
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>
页面效果：
内容没有随滚动条滚动
![[转]如何让DIV固定在页面的某个位置而不随着滚动条随意滚动](https://2000zi.500zi.com/uploadfile/img/15/902/dcaefbc755174be03d7a6d772aba31c6.jpg)
