网页保持footer始终在底部
希望达到的效果:
不管main 中内容是多还是少,footer始终紧贴底部
注意:
(1)body的css属性position的值必须是:relative;
因为body的position容易被浏览器自动改为:static,所以:
position: relative !important;
(2)主体内容#main必须设置padding-bottom,并且其值必须是footer的高度;
如果下面叠在一起,
这样的话,可以设置footer上面元素的margin-bottom:
margin-bottom: 20px;
(3)#footer的position必须为absolute,
如果为fixed,导致的后果:footer始终在底部,主体内容很多时,会被footer盖住
(4)#footer的bottom必须是0
(5)IE8中仍然有问题,需要借助js来解决,具体参考:http://blog.csdn.net/hw1287789687/article/details/51492559
页面完整代码:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://hbjltv.com/static/js/jquery-1.11.1.js"></script>
<script type="text/javascript"
src="http://hbjltv.com/static/js/common_util.js"></script>
<script type="text/javascript"
>
var count = 0;
$(function () {
$('#addDivBtn').click(function () {
$('#appendDiv').append('<div>aaaaaa' + (++count) + '</div>')
});
})
</script>
<title>将footer固定在页面底部的实现方法</title>
<style>
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0;
padding: 0;
position: relative !important;
}
#header {
background-color: #ffe4c4;
}
#main {
padding-bottom: 100px;
background-color: #bdb76b;
}
/* main的padding-bottom值要等于或大于footer的height值 */
#footer {
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
background-color: #ffc0cb;
left: 0;
right: 0;
}
</style>
</head>
<body>
<div id="header">header</div>
<div id="main">main content
<div>
<input type="button" id="addDivBtn" value="添加div">
</div>
<div id="appendDiv"></div>
</div>
<div id="footer">footer</div>
</body>
</html>