网页保持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>

网页保持footer始终在底部

猜你喜欢