css 实现 sticky footer 粘连布局
2023-10-11 本文已影响0人
暴躁程序员
当非 footer 区域高度不够时 footer 吸附在底部，当高度超过时，footer 随着内容向下
一、通过 flex 布局实现粘连布局
原理：设置纵向弹性布局，非底部区域设置 flex: 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>flex 实现粘连布局</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.main {
display: flex;
flex-direction: column;
height: 100%;
}
header {
min-height: 120px;
background: green;
}
main {
flex: 1;
background: yellow;
}
footer {
min-height: 100px;
background: red;
}
</style>
</head>
<body>
<section class="main">
<header>header</header>
<main>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<!-- <div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div> -->
</main>
<footer class="footer">footer</footer>
</section>
</body>
<script></script>
</html>
二、通过 calc 计算属性实现粘连布局
原理：非 footer 区域使用 min-height: calc(100vh - 底部距离);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>calc 计算属性实现粘连布局</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.main {
height: 100%;
}
main {
background: yellow;
min-height: calc(100vh - 100px);
}
footer {
background: red;
height: 100px;
}
</style>
</head>
<body>
<section class="main">
<main>
<!-- <div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div> -->
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
<div>item</div>
</main>
<footer class="footer">footer</footer>
</section>
</body>
<script></script>
</html>
