要实现一个位于页面底部固定的 footer,可以使用如下的 CSS 方案:
要实现一个位于页面底部固定的 footer,可以使用如下的 CSS 方案:
- 添加 CSS 样式代码
.footer {
position: fixed;
bottom: 0;
width: 100%;
background-color: #f5f5f5;
text-align: center;
}
-
第一步的 CSS 样式代码解释
-
position: fixed
属性将元素置于浏览器窗口内的固定位置,即不随页面滚动而改变位置。 bottom: 0
属性使元素底部与 viewport 底部对齐。width: 100%
属性设置元素宽度撑满整个 viewport。background-color: #f5f5f5
属性设置元素背景色为灰色。-
text-align: center
属性使元素内文字居中对齐。 -
添加 HTML 代码
<body>
<div class="content">
<!-- your webpage content here -->
</div>
<div class="footer">
<!-- your footer content here -->
</div>
</body>
其中,.content
类定义页面正文区域,以撑开页面高度,同时使 .footer
元素类固定在页面底部。
- 示例一
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page Title</title>
<style>
.content {
height: 2000px;
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
background-color: #f5f5f5;
text-align: center;
padding: 1em;
}
</style>
</head>
<body>
<div class="content">
<h1>Page Title</h1>
<p>This is some content.</p>
</div>
<div class="footer">
<p>Copyright © 2021</p>
</div>
</body>
</html>
运行上述代码可以实现类固定在页面底部的 footer。
- 示例二
下面的示例使用 CSS Flexbox 实现 footer 粘贴在浏览器底部。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Page Title</title>
<style>
html, body {
height: 100%;
margin: 0;
}
.page-wrapper {
display: flex;
flex-direction: column;
height: 100%;
justify-content: space-between;
}
.content {
flex: 1;
padding-top: 1em;
}
.footer {
background-color: #f5f5f5;
text-align: center;
padding: 1em;
}
</style>
</head>
<body>
<div class="page-wrapper">
<div class="content">
<h1>Page Title</h1>
<p>This is some content.</p>
</div>
<div class="footer">
<p>Copyright © 2021</p>
</div>
</div>
</body>
</html>
该示例中,我们将 .content
和 .footer
包裹在一个横向布局的容器中,并使用 flex-direction: column
让.
content` 上方留有一定空白。
这样做的结果是.content
元素可以自由地伸展以填充余下空间,同时.footer
粘附在容器底部。
沃梦达教程
本文标题为:div footer标签css实现位于页面底部固定


基础教程推荐
猜你喜欢
- JSONObject与JSONArray使用方法解析 2024-02-07
- html5视频如何嵌入到网页(视频代码) 2025-01-22
- 纯css实现漂亮又健壮的tooltip的方法 2024-01-23
- js判断一个对象是否在一个对象数组中(场景分析) 2022-10-21
- Loaders.css免费开源加载动画框架介绍 2025-01-23
- 创建Vue3.0需要安装哪些脚手架 2025-01-16
- clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析 2024-01-08
- Bootstrap学习笔记之css组件(3) 2024-01-22
- Django操作cookie的实现 2024-04-15
- webpack学习笔记一:安装webpack、webpack-dev-server、内存加载js和html文件、loader处理非js文件 2023-10-29