CSS固定底部写法
2020-04-11 本文已影响0人
六寸光阴丶
写在前面
如果本文对您有所帮助，就请点个关注吧！
一、问题描述
本文主要介绍一个Footer元素如何粘住底部，使其无论内容多或者少，Footer元素始终紧靠在浏览器的底部。我们知道，当内容足够多可以撑开底部到达浏览器的底部，如果内容不够多，不足以撑开元素到达浏览器的底部时，下面要讲的布局就是解决如何使元素粘住浏览器底部。需求看下图：
sticky-footer.png
二、解决方案
1. Flex1
解决思路
首先将html和body元素的高度设置为100%，然后在body添加一个div作为容器，并将其高度设置为100%，设置display:flex;flex-direction: column;，利用justify-content: space-between;在内部设置两个div，上面与下面，即可实现底部固定，注意要设置底部元素的flex属性为不可放缩，否则会被压缩。
源代码
<!DOCTYPE html>
<html>
<head>
<title>固定底部</title>
<style type="text/css">
html, body {
margin: 0;
height: 100%;
}
.window {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
footer {
background-color: red;
flex: 0 0 300px;
}
</style>
</head>
<body>
<div class="window">
<div class="main">
<!-- 可自行添加文本进行测试 -->
<p>测试文本</p>
<p>测试文本</p>
<p>测试文本</p>
<p>测试文本</p>
<p>测试文本</p>
<p>测试文本</p>
<p>测试文本</p>
<p>测试文本</p>
<p>测试文本</p>
<p>测试文本</p>
<p>测试文本</p>
<p>测试文本</p>
<p>测试文本</p>
</div>
<footer></footer>
</div>
</body>
</html>
2.Flex2
解决思路
同样设置父元素display: flex;flex-direction: column;,然后将上面的元素的设置为flex: 1;,使其高度不足时自动补全，同样要设置底部元素不可放缩，否则会被压缩。
源代码
<!DOCTYPE html>
<html>
<head>
<title>固定底部</title>
<style type="text/css">
html, body {
margin: 0;
height: 100%;
}
.window {
height: 100%;
display: flex;
flex-direction: column;
}
.main {
flex: 1;
}
footer {
flex: 0 0 300px;
background-color: red;
}
</style>
</head>
<body>
<div class="window">
<div class="main">
<!-- 可自行添加文本进行测试 -->
<p>测试文本</p>
<p>测试文本</p>
<p>测试文本</p>
<p>测试文本</p>
<p>测试文本</p>
<p>测试文本</p>
<p>测试文本</p>
<p>测试文本</p>
<p>测试文本</p>
<p>测试文本</p>
<p>测试文本</p>
<p>测试文本</p>
</div>
<footer></footer>
</div>
</body>
</html>
3.margin与padding
解决思路
底部元素增加负值上边距
源代码
<!DOCTYPE html>
<html>
<head>
<title>固定底部</title>
<style type="text/css">
html, body {
margin: 0;
height: 100%;
}
.window {
min-height: 100%;
}
.main {
padding-bottom: 300px;
}
footer {
margin-top: -300px;
height: 300px;
background-color: red;
}
</style>
</head>
<body>
<div class="window">
<div class="main">
<!-- 可自行添加文本进行测试 -->
<p>测试内容</p>
<p>测试内容</p>
<p>测试内容</p>
<p>测试内容</p>
<p>测试内容</p>
</div>
</div>
<footer></footer>
</body>
</html>
4. calc()（推荐，使用的dom最少）
解决思路
使用calc()计算内容的高度
源代码
<!DOCTYPE html>
<html>
<head>
<title>固定底部</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
}
.main {
min-height: calc(100% - 300px);
}
footer {
height: 300px;
background-color: red;
}
</style>
</head>
<body>
<div class="main">
<!-- 可自行添加文本进行测试 -->
<p>测试内容</p>
<p>测试内容</p>
<p>测试内容</p>
<p>测试内容</p>
<p>测试内容</p>
</div>
<footer></footer>
</body>
</html>
