写界面时几乎每一个界面都会有顶部、中间内容、底部三个部分。
在写底部时,我们总是需要底部总是在最底下的部分。我常常会出现这样的情况:把一个个盒子按顺序写下去并所写的界面的顶部还有内容部分已经占满了整个页面,所以会很自然的把footer的盒子直接放在前面的盒子后面。
- 当前面内容的盒子足够大,足以撑开元素到浏览器底部时,紧跟在后面的footer盒子也会排在其后不用做任何处理就实现了footer在底部的操作。如下图左所示
当前面内容盒子不足以撑起到浏览器底部,如下图右所示,footer的下面大量留白。也就不能起到保持在最底部的作用了。
解决方法
1. 适用于footer前面内容较少时的情况
在通过百度后,普遍找到了在css中加入position:absolute; bottom:0;
的方法。在测试后发现这个方法在页面有留白的时候是非常好用的。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.header{
background: yellow;
width: 100%;
height: 100px;
}
.content{
background:orange;
width:100%;
height:800px;
}
.footer{
background:gold;
width:100%;
height:100px;
position: absolute;
bottom: 0;
}
</style>
</head>
<body>
<div class="header">
<h1>