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

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在底部(测试它人方法)的更多相关文章

  1. HTML中footer固定在页面底部的若干种方法

    <div class="header"><div class="main"></div></div> <d ...

  2. 如何将页脚固定在页面底部，4中方法 转载自：W3CPLUS

    原博客地址:http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page 作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面 ...

  3. 网页布局中页面内容不足一屏时页脚footer固定底部

    方法一:给html.body都设置100%的高度,确定body下内容设置min-height有效,然后设置主体部分min-height为100%,此时若没有header.footer则刚好完美占满全屏 ...

  4. CSS实现Footer固定底部，超过一屏自动撑开

    方法一:给html.body都设置100%的高度,确定body下内容设置min-height有效,然后设置主体部分min-height为100%,此时若没有header.footer则刚好完美占满全屏 ...

  5. Apache ab测试工具使用方法（无参、get传参、post传参）(转)

    转自Apache ab测试工具使用方法(无参.get传参.post传参) Ab测试工具是apache自带的测试工具,具有简单易上手的特性,下面我总结一下我的使用方法,首先去官方下载apache程序包, ...

  6. LoadRunner测试50人同时登陆下单

    LoadRunner测试50人同时登陆下单 一.LoadRunner简介 LoadRunner,是一种预测系统行为和性能的负载测试工具.通过以模拟上千万用户实施并发负载及实时性能监测的方式来确认和查找 ...

  7. XCode中的单元测试：编写测试类和方法（内容意译自苹果官方文档）

    当你在工程中通过测试导航栏添加了一个测试target之后, xcode会在测试导航栏中显示该target所属的测试类和方法. 这一章演示了怎么创建测试类,以及如何编写测试方法. 测试targets, ...

  8. android 让一个控件按钮居于底部的几种方法

    android 让一个控件按钮居于底部的几种方法1.采用linearlayout布局:android:layout_height="0dp" <!-- 这里不能设置fill_ ...

  9. Randoop测试类和方法（用例自动生成）

    详细使用方法见randoop官网: https://randoop.github.io/randoop/manual/index.html 测试程序之前,先检测下你的Randoop是否配置好: 打开c ...

随机推荐

  1. 3月23日html(四) 格式与布局

    一.position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口. 二.position:absolute 1.外层没有position:absolute(或relat ...

  2. 如何写一个网页标题title的闪动提示

    通过网页title来提示用户有新消息这个功能很常见,比如现在的微博,还有一些邮箱,这个功能都很常见.如何实现则个功能呢? 思路是:通过ajax访问后台,若有新消息,则将网页的title替换为 提示信息 ...

  3. (转载)Python装饰器学习

    转载出处:http://www.cnblogs.com/rhcad/archive/2011/12/21/2295507.html 这是在Python学习小组上介绍的内容,现学现卖.多练习是好的学习方 ...

  4. python中的redis定义

    redis官方介绍,python的redis客户端可以一处定义,处处使用.到底是不是这样呢?是不是只要在配置文件里定义一次,不管在哪都可以使用了? 下面用代码说明: import redis impo ...

  5. 在YouCompleteMe+Syntastic中添加和取消对C++11的支持

    添加对c++11的支持: /.vimrc中添加: let g:syntastic_cpp_compiler = 'g++'  "change the compiler to g++ to s ...

  6. 关于offsetWidth innerWidth的使用

    最近因为有使用到offsetWidth 和innerWidth,刚开始以为这两个属性在jq何js之中是可以通用的,谁知道在js中使用innerWidth时,发现如果对页面元素使用它时,发现出来的是un ...

  7. Lintcode--009(单词切分）

    http://www.lintcode.com/zh-cn/problem/word-break/ 单词切分 给出一个字符串s和一个词典,判断字符串s是否可以被空格切分成一个或多个出现在字典中的单词. ...

  8. 在NGINX作反向代理，CI（CodeIgniter）的PHP框架下限制管理目录的IP的实现

    这个搞得有点久,不过,还算完美解决. 主要是前端NGINX,后端也是NGINX. 前端的NGINX不好作相关的URL权限限制,因为所有的URL在CI里都要经过INDEX.PHP重定向. 并且,在后端N ...

  9. cv：显示Linux命令运行进度

    cv: 显示 cp.mv 等命令的进度 2014-07-14 By toy Posted in Apps Edit on GitHub 在 Linux 系统中 , 大多数命令从来都是信奉 “ 沉默是金 ...

  10. JDBC中Statement接口提供的execute、executeQuery和executeUpdate之间的区别

    Statement 接口提供了三种执行 SQL 语句的方法:executeQuery.executeUpdate 和 execute.使用哪一个方法由 SQL 语句所产生的内容决定. 方法execut ...