footer一直在底部
2019-10-30 本文已影响0人
小太阳可可
1.gif
开发中经常会遇到，当页面内容不足一屏时，底部悬浮在显示器最底层，当内容超过一屏时。底部随内容下去；
之前一直都用js去算，直到某一天。。。
喔噢！css可以直接实现哦！
上代码:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>css开发小技巧</title>
<style type="text/css">
*{text-align: center;font-size:16px;line-height: 60px;}
header{height:60px;width:100%;background:pink;}
.wrap{position:relative;min-height: 100%;padding-bottom:60px;box-sizing:border-box;}
.con{height: 100px;}
footer{margin-top:-60px;width:100%;height:60px;background: red;}
</style>
<body>
<div class="wrap">
<header>header</header>
<div class="con">con</div>
</div>
<footer class="footer">footer</footer>
</body>
</html>
