让footer在底部(测试它人方法)

Posted MirrorSpace

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了让footer在底部(测试它人方法)相关的知识，希望对你有一定的参考价值。

要求:网页布局中,页脚在底部.内容不够一页时,在底部.内容超过一页时,出现卷动条,页脚也在被挤到底部

1.测试的这个文章介绍的办法   链接: http://www.cnblogs.com/chenyuming507950417/p/4003651.html

   经测试,这个办法可以实现要求.

2.测试代码说明

html结构:　　　

<div class="container">
　　<div class="header">头</div>

　　<div id="content" class="content">内容</div>

　　<div class="footerbox">脚部</div>

</div>

css(关键)

.container {
　　　　position: absolute; /*关键1,容器定位是 absolute,测试发现换成 relative 的,会不行.*/
　　　　min-height: 100%; /*关键2,容器的最小高度为视口高度*/
　　　　/**/
　　　　width: 100%;
}

.content {
　　　　/*这个距离是内容区到footer的距离,防止footer遮住内容区域*/
　　　　padding-bottom: 54px;
}

.footerbox {
　　　　position: absolute; /*关键3,绝对定位,相对于.container*/
　　　　bottom: 0px; /*关键4,定位位置在底部*/
　　　　/**/
　　　　background-color: #000;
　　　　height: 30px;
　　　　line-height: 30px;
　　　　margin: 0;
　　　　padding: 0;
　　　　width: 100%;
}

3.完整测试代码

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>CSS + DIV 让页脚始终底部</title>
    <meta name="generator" content="" />
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            position: absolute; /*关键1,容器定位是 absolute,测试发现换成 relative 的,会不行.*/
            min-height: 100%; /*关键2,容器的最小高度为视口高度*/
            /**/
            width: 100%;
        }

        .content {
            /*这个距离是内容区到footer的距离,防止footer遮住内容区域*/
            padding-bottom: 54px;
        }

        .footerbox {
            position: absolute; /*关键3,绝对定位,相对于.container*/
            bottom: 0px; /*关键4,定位位置在底部*/
            /**/
            background-color: #000;
            height: 30px;
            line-height: 30px;
            margin: 0;
            padding: 0;
            width: 100%;
        }

        .footer {
            width: 1080px;
            color: forestgreen;
            height: 30px;
            line-height: 30px;
            margin: 0 auto;
        }

        p {
            text-align: center;
            font-size: 1em;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            底部footer,内容少时自动在最底下,内容多时撑开后到最底下
            <button onclick="additem()">增加内容</button>
        </div>
        <div id="content" class="content">
            
        </div>
        <div class="footerbox">
            <div class="footer">
                这是脚,这是脚,这是脚,这是脚,这是脚,这是脚,这是脚,这是脚,这是脚,这是脚,这是脚,这是脚,这是脚
            </div>
        </div>
    </div>
    <script>
        for (var i = 0; i < 35; i++) {
            var about = document.getElementById("content");
            var para = document.createElement("p");
            var node = document.createTextNode("这是原有内容" + about.childElementCount);
            para.appendChild(node);
            about.appendChild(para);
        }
        function additem() {
            var about = document.getElementById("content");
            var para = document.createElement("p");
            var node = document.createTextNode("新加入一行内容" + about.childElementCount);
            para.appendChild(node);
            about.appendChild(para)
        }
    </script>
</body>
</html>

 

以上是关于让footer在底部(测试它人方法)的主要内容，如果未能解决你的问题，请参考以下文章

怎样让页面的 footer 始终在最底部

内容不超过屏幕，footer固定在底部，超过时被撑出屏幕

页面主体高度不固定，如何让页面的footer始终在最底部

让footer始终待在页面底部

对齐div底部的按钮

CSS如何把DIV永远置于页面的底部？