網頁保持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>