粘连布局
- 内容不够时footer在页脚,没有滚动条
- 内容撑开时footer随内容撑开
*html,body的height设置为100%,不能为auto
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>粘性布局</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.container {
/* 解决内容不足footer没有在底部 */
min-height: 100%;
text-align: center;
background-color: lightblue;
color: white;
}
.container-body {
/* 解决文字覆盖footer */
padding-bottom: 50px;
}
.footer {
height: 50px;
background-color: #000;
line-height: 50px;
text-align: center;
color: #fff;
/* 解决容器顶开了footer出现滚动条 */
margin-top: -50px;
}
</style>
</head>
<body>
<div class="container">
<div class="container-body">
nam totam maxime optio. Sint excepturi dignissimos quos quisquam corporis facilis delectus impedit? Ex
praesentium reprehenderit sint necessitatibus. Numquam minus ipsam error, incidunt mollitia reiciendis.
Eveniet, doloremque? Explicabo, maxime cupiditate quidem sapiente qui id! Corrupti inventore expedita, magni
vero aliquam enim eaque quae reiciendis blanditiis quibusdam optio omnis accusantium error sunt amet
laboriosam. Aperiam, minima!
Quis debitis, odit pariatur odio corporis in quaerat corrupti, recusandae minima tenetur doloremque aliquid
magni. Distinctio alias vel, quod repellendus hic quaerat, reprehenderit atque nisi dignissimos accusamus at
dolorem ducimus.
Minima ex reprehenderit debitis asperiores magni nesciunt architecto, modi nobis ipsum nemo nulla nam, fuga
corporis aperiam aliquid expedita ut numquam libero accusamus perferendis maxime error quam reiciendis et?
Cupiditate!
</div>
</div>
<div class="footer">footer</div>
</body>
</html>
