zoukankan html css js c++ java

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

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

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

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

2.测试代码说明

html结构:　　　

</div>

css(关键)

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

查看全文

相关阅读:
AcWing 1135. 新年好图论枚举
 uva 10196 将军模拟
 LeetCode 120. 三角形最小路径和 dp
LeetCode 350. 两个数组的交集 II 哈希
 LeetCode 174. 地下城游戏 dp
LeetCode 面试题 16.11.. 跳水板模拟
 LeetCode 112. 路径总和递归树的遍历
 AcWing 1129. 热浪 spfa
Thymeleaf Javascript 取值
 Thymeleaf Javascript 取值

原文地址：https://www.cnblogs.com/mirrortom/p/6004961.html