下面是详解Sticky Footer 绝对底部的两种套路的完整攻略。
一、Sticky Footer的概念
在网页设计中，Sticky Footer指的是网页底部一直贴在视口底部，并且在网页内容过短时也不会出现在视口中的一种解决方案。此外，Sticky Footer还需要保证在网页内容过长时，能够让滚动条正常滚动，即不会被遮挡。
二、套路一：用flex实现
这种套路的主要思路是：
- 用flex将网页中的容器撑满整个视口；
- 将网页中的主要内容放在一个flex-grow的容器中，并撑满整个视口；
- 将网页底部的内容放在一个高度为0的容器中，最后通过margin-top将其推到视口底部。
实现代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sticky Footer Flex实现</title>
<style type="text/css">
body {
height: 100%;
display: flex;
flex-direction: column;
}
.main {
flex-grow: 1;
background-color: #ccc;
}
.footer {
height: 0;
margin-top: auto;
background-color: #333;
color: #fff;
text-align: center;
width: 100%;
}
</style>
</head>
<body>
<div class="main">
<!-- 网页中的主要内容 -->
</div>
<div class="footer">
<!-- 网页底部的内容 -->
</div>
</body>
</html>
该代码中，使用了display: flex来将网页全部撑满整个视口；使用了flex-grow: 1来将主要内容的容器撑满整个视口；使用了margin-top: auto来将尾部内容推到视口底部。
三、套路二：用grid实现
这种套路的主要思路是：
- 用grid将网页分为两行：第一行放置主要内容，第二行放置网页底部；
- 将第二行的高度设置为0，并使用 grid-row: 2来定位到视口底部。
实现代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sticky Footer Grid实现</title>
<style type="text/css">
body {
height: 100%;
display: grid;
grid-template-rows: auto 0;
grid-template-areas:
"main"
"footer";
}
.main {
grid-area: main;
background-color: #ccc;
height: 100%;
}
.footer {
grid-area: footer;
background-color: #333;
color: #fff;
text-align: center;
width: 100%;
height: 0;
grid-row: 2;
}
</style>
</head>
<body>
<div class="main">
<!-- 网页中的主要内容 -->
</div>
<div class="footer">
<!-- 网页底部的内容 -->
</div>
</body>
</html>
该代码中，使用了display: grid和grid-template-rows将网页分为两行；使用grid-area将主要内容和底部容器定位到相应的位置；使用grid-row: 2将底部容器定位到视口底部。
四、示例说明
下面，我将通过两个示例来说明如何使用以上的两种套路：
示例一
网页中的主要内容包括一个固定高度的头部和一个主体区域，主体区域中的内容比较少，底部需要放置一个版权信息区域，版权信息需要保证在视口底部。
该示例可以使用flex套路来实现。具体实现代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sticky Footer示例一</title>
<style type="text/css">
body {
height: 100%;
display: flex;
flex-direction: column;
}
.header {
height: 100px;
background-color: #ccc;
}
.main {
flex-grow: 1;
background-color: #ddd;
display: flex;
flex-direction: column;
}
.footer {
height: 60px;
margin-top: auto;
background-color: #333;
color: #fff;
text-align: center;
width: 100%;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="main">
<!-- 主体内容 -->
</div>
<div class="footer">版权信息</div>
</body>
</html>
其中，网页被分为了三个部分：头部、主体和底部。主体部分使用了flex实现。
示例二
网页中的主要内容包括一个固定高度的头部和一个较长的主体区域，主体区域中有一个按钮，当按钮被点击时，会在主体区域中动态添加一些内容。底部需要放置一个版权信息区域，版权信息需要保证在视口底部。
该示例可以使用grid套路来实现。具体实现代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Sticky Footer示例二</title>
<style type="text/css">
body {
height: 100%;
display: grid;
grid-template-rows: 100px auto 0;
grid-template-areas:
"header"
"main"
"footer";
}
.header {
grid-area: header;
background-color: #ccc;
}
.main {
grid-area: main;
background-color: #ddd;
position: relative;
}
.button {
position: absolute;
top: 10px;
left: 10px;
padding: 10px;
background-color: #333;
color: #fff;
cursor: pointer;
z-index: 2;
}
.content {
position: relative;
z-index: 1;
}
.footer {
grid-area: footer;
background-color: #333;
color: #fff;
text-align: center;
width: 100%;
height: 0;
grid-row: 3;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="main">
<div class="button">添加内容</div>
<div class="content">
<!-- 主体内容 -->
</div>
</div>
<div class="footer">版权信息</div>
<script>
//按钮点击事件，添加内容
document.querySelector('.button').addEventListener('click', function() {
let content = document.createElement('div');
content.innerHTML = '这是新添加的内容';
document.querySelector('.content').appendChild(content);
});
</script>
</body>
</html>
其中，网页被分为了三个部分：头部、主体和底部。主体部分使用了grid实现，并且在其中动态添加了新的内容。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：详解Sticky Footer 绝对底部的两种套路 - Python技术站
微信扫一扫 
支付宝扫一扫 