css样式-内容固定在页面底部，不随滚动条滚动

最新推荐文章于 2024-04-27 21:35:02 发布

小白要努力变黑

最新推荐文章于 2024-04-27 21:35:02 发布

阅读量8.9k

点赞数 4

分类专栏：前端文章标签： css 前端 html5 javascript

本文链接：https://blog.csdn.net/m0_51315555/article/details/127087441

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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>

页面效果：