粘连布局
CSS stickyFooter(粘连布局)
有一块内容<main>
,当<main>
的高度足够长的时候,<footer>
会紧紧跟在<main>
后面。
当<main>
元素比较短的时候(比如小于屏幕高的度),<footer>
会“粘连”在屏幕底部。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>粘连布局</title>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.warp {
min-height: 100%;
background: #bfa;
}
.warp .main {
padding-bottom: 50px;
text-align: center;
}
.footer {
margin-top: -50px;
height: 50px;
background: gray;
line-height: 50px;
text-align: center;
}
</style>
<body>
<div class="warp">
<div class="main">
main <br /> main <br /> main <br />
main <br /> main <br /> main <br />
main <br /> main <br /> main <br />
main <br /> main <br /> main <br />
main <br /> main <br /> main <br />
</div>
</div>
<div class="footer">
footer
</div>
</body>
</html>
戳我查看最终效果!<<
如发现错误请联系我,谢谢你。
本文链接:http://ninefire.tk/CSS2.1/04.html