在刚开始给网页写footer的时候，我们会碰到一个让人烦躁的问题：当页面内容太少时，footer显示在了页面中间，这是我们不希望出现的，我们希望它能够永远呆在底部，不管网页的内容是多还是少。下面的代码使得footer能够固定在底部：

html文件的代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <link rel="stylesheet" type="text/css" href="index6.css">

</head>

<body>

    <div id="container">

        <div id="main">

            <p>This is the content.</p>

        </div>

    </div>

    <div id="footer">

    </div>

</body>

</html>

css文件的代码：

* {

    margin:;

    padding:;

}

html, body {

    height: 100%;

}

#container {

    min-height: 100%;

}

#main {

    overflow: auto;

    padding-bottom: 100px;

}

#footer {

    background-color: #000;

    position: relative;

    height: 100px;

    margin-top: -100px;

    clear: both;

}

手机页面和电脑页面显示效果如下：

参考链接：

[1] https://www.youtube.com/watch?v=qlCIXXhSX6Y&list=PL0eyrZgxdwhwNC5ppZo_dYGVjerQY3xYU&index=43&t=0s

HTML5+CSS把footer固定在底部的更多相关文章

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

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

  2. 利用CSS使footer固定在页面底部

    1.HTML基本结构 <!DOCTYPEhtml> <htmlxmlns="http://www.w3.org/1999/xhtml"> <headr ...

  3. stickey-footer实现footer固定页面底部

    先看看实现效果:http://getbootstrap.com/2.3.2/examples/sticky-footer.html 当一个网页比较简单,内容比较少使得网页不足浏览器高的时候,为了显示更 ...

  4. css实现按钮固定在底部

    实现类似如下图的功能: 采用如下的样式来控制:

  5. 让footer固定在页面（视口）底部（CSS-Sticky-Footer）

    让footer固定在页面(视口)底部(CSS-Sticky-Footer) 这是一个让网站footer固定在浏览器(页面内容小于浏览器高度时)/页面底部的技巧.由HTML和CSS实现,没有令人讨厌的h ...

  6. 让footer固定在页面底部（CSS-Sticky-Footer）

    让footer固定在页面底部(CSS-Sticky-Footer)     这是一个让网站footer固定在浏览器(页面内容小于浏览器高度时)/页面底部的技巧.由HTML和CSS实现,没有令人讨厌的h ...

  7. CSS布局:让页底内容永远固定在底部

    我们在设计一些页面内容甚少的网页时(典型应用就是登陆页面),由于显示器的分辨率大,在正常情况下,假如页面内容高度小于浏览器高度时,页面底部以下会留下很大的空间... 先看示例:http://www.h ...

  8. footer固定在页面底部的实现方法总结

    方法一:footer高度固定+绝对定位 HTML代码: <body> <header>头部</header> <main>中间内容</main&g ...

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

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

随机推荐

  1. 蓝牙BLE实用教程（转载）

    欢迎使用 小书匠(xiaoshujiang)编辑器,您可以通过 设置 里的修改模板来改变新建文章的内容. 1.蓝牙BLE常见问答 Q: Smart Ready 和 Smart 以及传统蓝牙之间是什么关 ...

  2. Final发布 文案+美工展示

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2476项目地址:https://coding.net/u/wuyy694/ ...

  3. Linux内核分析作业 NO.1

    通过汇编一个简单的C程序,分析汇编代码理解计算机是如何工作的 于佳心 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/cour ...

  4. 2019 front-end web trending

    2019 front-end web trending https://github.com/kamranahmedse/developer-roadmap https://raw.githubuse ...

  5. Delphi Try Except 实例

    //判断单位转换率 try um_rate := vp_mstr.F('vp_um_rate_d').AsFloat / vp_mstr.F('vp_um_rate_m').AsFloat; then ...

  6. codeforces4A

    Watermelon CodeForces - 4A Qingyu有一个简单的问题想让你解决. 输入一个数,如果它是2,或者它是奇数,输出NO,否则输出YES. 很简单吧,因此你应该很快解决. 输入 ...

  7. Django_ KindEditor 插件使用

    KindEditor  富文本编辑器插件 目的及原理: 更便捷的在前端页面上实现用户的文本编辑操作, 本质上就是对标签的样式进行封装和事件预处理, 常规操作都可以通过直接的引入即可实现, 但是对于存在 ...

  8. PHP用户输入安全过滤和注入攻击检测

    摘抄自ThinkPHP /** * 获取变量 支持过滤和默认值 * @param array $data 数据源 * @param string|false $name 字段名 * @param mi ...

  9. Hbuild开发App入门

    http://ask.dcloud.net.cn/article/89建议必看网站 http://www.html5plus.org/doc/h5p.html  API下载地址

  10. 如何把你的eclipse编辑器修改成黑色的主题