在刚开始给网页写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. EOS开发基础之五：使用cleos命令行客户端操作EOS——智能合约之Exchange

    先回答一下上一节中留下的问题,为什么我就看不到eosio这个账户中的钱呢?我明明为它create了很多token啊. 对,你是create了,但是没有issue啊.create了1000000000 ...

  2. [T-ARA][Tic Tic Toc]

    歌词来源:http://music.163.com/#/song?id=22704478 Tic Tic Toc RA Tic Tic Toc RA [Tic Tic Toc RA Tic Tic T ...

  3. 最近在研究google的angularjs

    最近在研究google的angularjs,先做个简单的例子来试试. <!doctype html> <html lang="en" ng-app="m ...

  4. PAT甲题题解-1036. Boys vs Girls (25)-找最大最小，大水题

    题意:给出n个人的姓名.性别.ID.分数,让你找出其中哪个妹纸分数最高.哪个汉子分数最低.以及他们的差如果没有妹纸或者汉子,则对应输出Absent,差用NA代替. 就是for一遍找最大最小值,水题 # ...

  5. PAT甲题题解-1069. The Black Hole of Numbers (20)-模拟

    博主欢迎转载,但请给出本文链接,我尊重你,你尊重我,谢谢~http://www.cnblogs.com/chenxiwenruo/p/6789244.html特别不喜欢那些随便转载别人的原创文章又不给 ...

  6. 2-Thirteenth Scrum Meeting-10151213

    任务安排 成员 今日完成 明日任务 闫昊 获取视频播放进度  用本地数据库记录课程结构和学习进度 唐彬  阅读IOS代码+阅读上届网络核心代码  请假(编译……) 史烨轩 下载service开发    ...

  7. 20135202闫佳歆--week5 系统调用（下）--学习笔记

    此为个人笔记存档 week 5 系统调用(下) 一.给MenuOS增加time和time-asm命令 这里老师示范的时候是已经做好的了: rm menu -rf 强制删除 git clone http ...

  8. 作业一_随笔1_初来乍到：学号&博客地址

    031302540——http://www.cnblogs.com/yyj031302540/ 计算机实验班叶艺洁

  9. 新版vue-cli如何使用json-server来mork

    新版vue-cli如何使用json-server来mork 原创 2018年03月06日 11:28:32 标签: vue / 前端 / webpack / vue-cli 185 新版的vue-cl ...

  10. appium获取Toast内容的方法

    做自动化测试的时候,可能需要根据弹出的Toast提示来做下一步判断.这里记录一下获取Toast内容的方法,同时巩固一下显示等待的方法之一WebDriverWait. from selenium.web ...