Bootstrap 是一个开源的前端框架，为开发响应式和移动端友好的网站提供了很好的支持。其中，粘页脚效果是 Bootstrap 中比较常见和广泛使用的一种效果，可以让网页内容相对固定，脚部内容吸附在页面底部，当页面滚动时固定在底部，不随滚动而消失。下面将详细讲解 Bootstrap 粘页脚效果的完整攻略。
原理
HTML 的页面元素的中有两个比较重要的属性值，一个是 offsetHeight 能够获取到元素自身高度加上上下边框的高度值，还有一个是 scrollTop 能够获取到元素滚动条相对顶部边框距离的高度。利用这两个属性值，可以判断页面内容是否过短，从而对 footer 进行定位。
步骤
1.确定页面最小高度：
通过设置 body 的最小高度等于视口高度，可以确保网页内容少时，footer 能够吸附在屏幕最下方。
示例代码：
body {
min-height: 100vh;
}
2.添加 .wrapper 包裹层：
为了将内容区域与 footer 区域分隔开，需要给内容区域添加一个包裹层，命名为 .wrapper。
示例代码：
<body>
<!-- 内容区域 -->
<div class="wrapper">
...
</div>
<!-- footer 区域 -->
<footer>
...
</footer>
</body>
3.设置 .wrapper 高度和边距：
为让 .wrapper 占据剩余高度，需要先将 footer 移开，增加 padding-bottom 的值，尽量设置成 footer 的高度，再将 .wrapper 的高度设置为 100% - footer 的高度。
示例代码：
footer {
position: relative;
margin-top: -100px;
/* 设置元素自身高度加上上下边框高度的值 */
height: 100px;
/* 设置 padding-bottom 为 100px，尽量设置成 footer 的高度 */
padding-bottom: 100px;
}
.wrapper {
/* 高度为 最小高度 + footer 高度 + padding-bottom 的和 */
min-height: calc(100vh + 100px + 100px);
/* 设置底部边距为 -footer 的高度 */
margin-bottom: -100px;
}
4.设置 footer 的位置：
通过在.css 文件中绑定 footer 的类名，设置 footer 的 position 为 absolute，并添加 bottom 和 left 值实现 footer 的吸附定位。
示例代码：
footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
/* 设置元素自身高度加上上下边框高度的值 */
height: 100px;
}
完整示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap 粘页脚效果</title>
<style>
body {
min-height: 100vh;
}
footer {
position: relative;
margin-top: -100px;
height: 100px;
padding-bottom: 100px;
}
.wrapper {
min-height: calc(100vh + 100px + 100px);
margin-bottom: -100px;
}
footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
}
</style>
</head>
<body>
<!-- 内容区域 -->
<div class="wrapper">
<h1>欢迎来到我的站点</h1>
<p>网站内容...</p>
</div>
<!-- footer 区域 -->
<footer>
<p>联系方式...</p>
</footer>
</body>
</html>
示例说明：
以上代码中，使用了.min-height、padding-bottom 和 margin-bottom 将 .wrapper 定义为一个占据全部高度的元素，同时让 footer 具有粘页脚的特性，footer 的吸附定位通过 position: absolute、bottom: 0、left: 0、width: 100% 实现。内容部分和 site-heading、site-content 等可以自由定义。
通过实际应用这个效果，可以达到页面固定布局结构，优化用户浏览体验的效果。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Bootstrap 粘页脚效果 - Python技术站
微信扫一扫 
支付宝扫一扫 