css样式-内容固定在页面底部，不随滚动条滚动
warning:
这篇文章距离上次修改已过438天，其中的内容可能已经有所变动。
要使内容固定在页面底部并且不随着滚动条的滚动而移动，可以使用CSS的定位属性。以下是一个简单的例子，演示如何使用CSS将内容固定在页面底部：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>固定底部内容</title>
<style>
body, html {
height: 100%;
margin: 0;
}
.footer {
position: fixed; /* 使用fixed定位 */
left: 0;
bottom: 0; /* 固定位置在底部 */
width: 100%; /* 宽度为100% */
background-color: #333; /* 背景颜色 */
color: white; /* 字体颜色 */
text-align: center; /* 文本居中 */
padding: 10px 0; /* 上下填充 */
}
</style>
</head>
<body>
<div class="footer">
固定在底部的内容
</div>
<!-- 页面内容 -->
<div style="height: 2000px;"></div>
</body>
</html>在这个例子中，.footer 类定义了一个固定在页面底部的内容区域。通过设置position: fixed和bottom: 0，内容会始终显示在视口的底部，不会随着页面的滚动而移动。
评论已关闭