在刚开始给网页写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. Vue.js 相关知识（动画）

    1. 简介 Vue 在插入.更新或移除 DOM 时,提供多种不同方式的过渡效果,并提供 transition 组件来实现动画效果(用 transition 组件将需执行过渡效果的元素包裹) 语法:&l ...

  2. 从两个设计模式到前端MVC-洪宇

    引言 本文将从策略模式和观察者模式两个设计模式讲起,接着过渡到一个经典的复合模式- MVC架构,进而介绍MVC在Web上的适应-Model2架构.之后,我们将视野扩展到前端MVC,看一看前端MVC经典 ...

  3. 《Linux内核分析》第三周

    [李行之原创作品 转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000] <Linux内 ...

  4. Adobe X沙箱

    一.Adobe X沙箱简介 Adobe Reader X自从引入沙箱以来,对其攻击的难度就提高了很多.Reader X的沙箱是基于Google的Chrome沙箱,Chrome是开源的,Reader X ...

  5. PAT 2016 数据的交换输出

    http://acm.hdu.edu.cn/showproblem.php?pid=2016 Problem Description 输入n(n<100)个数,找出其中最小的数,将它与最前面的数 ...

  6. C#快速删除bin和obj文件夹的方法

    C#程序总会生成bin和obj文件夹,为了减小源码的大小,就有必要将这两个文件夹删除,于是想到用批处理文件来删除. 以下是批处理的代码: @echo offset nowPath=%cd%cd /cd ...

  7. 当数据库字段与model字段规则不一致时候 需要在xml里面手工转换

  8. Go匿名函数

    1.GO语言的匿名函数就是闭包 基本概念 闭包是可以包含自由(未绑定到特定对象)变量的代码块,这些变量不在这个代码块内或者任何全局上下文中定义,而是在定义代码块的环境中定义.要执行的代码块(由于自由变 ...

  9. Codeforces 600E Lomsat gelral（dsu on tree）

    dsu on tree板子题.这个trick保证均摊O(nlogn)的复杂度,要求资瓷O(1)将一个元素插入集合,清空集合时每个元素O(1)删除.(当然log的话就变成log^2了) 具体的,每次先遍 ...

  10. Berland and the Shortest Paths CodeForces - 1005F（最短路树）

    最短路树就是用bfs走一遍就可以了 d[v] = d[u] + 1 表示v是u的前驱边 然后遍历每个结点 存下它的前驱边 再用dfs遍历每个结点 依次取每个结点的某个前驱边即可 #include &l ...