HTML5+CSS把footer固定在底部
在刚开始给网页写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固定在底部的更多相关文章
- CSS实现Footer固定底部，超过一屏自动撑开
方法一:给html.body都设置100%的高度,确定body下内容设置min-height有效,然后设置主体部分min-height为100%,此时若没有header.footer则刚好完美占满全屏 ...
- 利用CSS使footer固定在页面底部
1.HTML基本结构 <!DOCTYPEhtml> <htmlxmlns="http://www.w3.org/1999/xhtml"> <headr ...
- stickey-footer实现footer固定页面底部
先看看实现效果:http://getbootstrap.com/2.3.2/examples/sticky-footer.html 当一个网页比较简单,内容比较少使得网页不足浏览器高的时候,为了显示更 ...
- css实现按钮固定在底部
实现类似如下图的功能: 采用如下的样式来控制:
- 让footer固定在页面（视口）底部（CSS-Sticky-Footer）
让footer固定在页面(视口)底部(CSS-Sticky-Footer) 这是一个让网站footer固定在浏览器(页面内容小于浏览器高度时)/页面底部的技巧.由HTML和CSS实现,没有令人讨厌的h ...
- 让footer固定在页面底部（CSS-Sticky-Footer）
让footer固定在页面底部(CSS-Sticky-Footer) 这是一个让网站footer固定在浏览器(页面内容小于浏览器高度时)/页面底部的技巧.由HTML和CSS实现,没有令人讨厌的h ...
- CSS布局:让页底内容永远固定在底部
我们在设计一些页面内容甚少的网页时(典型应用就是登陆页面),由于显示器的分辨率大,在正常情况下,假如页面内容高度小于浏览器高度时,页面底部以下会留下很大的空间... 先看示例:http://www.h ...
- footer固定在页面底部的实现方法总结
方法一:footer高度固定+绝对定位 HTML代码: <body> <header>头部</header> <main>中间内容</main&g ...
- HTML中footer固定在页面底部的若干种方法
<div class="header"><div class="main"></div></div> <d ...
随机推荐
- CVE-2010-2883
测试环境: Windows xp sp3 Adobe Reader 9.3.4 成因: CoolType.dll库的strcat函数在解析SING表中的uniqueName域时未作长度检查而造成栈溢出 ...
- Notes of Daily Scrum Meeting（12.17）
我们会尽量安排好时间,在其他作业不受影响的情况下加快项目的进度,在Deadline之前完成Beta阶段的工作. 今天的团队工作总结如下: 团队成员 今日团队工作 陈少杰 调试网络连接,补充后端代码 王 ...
- scrapy 爬虫怎么写入日志和保存信息
写入日志: 首先我的爬虫 name= article scrapy crawl article -s LOG_FILE=wiki.log 输出为不同格式: scrapy crawl article - ...
- Web项目--------原Oracle数据库的项目同时兼容MySql
原Oracle数据库的项目同时兼容MySql步骤: (一)修改资源配置文件applicationContext-dataSource.xml的数据库连接 Oracle数据库中加上from dual的原 ...
- 解决eclipse中mybatis的xml配置文件无代码提示问题
https://blog.csdn.net/IRainReally/article/details/81743506
- Git 笔记——如何处理分支合并冲突
1.前言 学习使用 Git 也有一段时间,但一直都是把 Git 当作一个代码仓库,使用的命令无非就是 clone, add, commit ,往往课程作业也没有过多人合作开发,没有体验过 Git 的分 ...
- SQLSERVER 设置自动备份数据库
1. SQLSERVER 简单的设置 计划任务 进行 备份数据库的操作. 首先需要打开 一些设置 执行 命令如下: sp_configure ; GO RECONFIGURE; GO sp_confi ...
- Java多线程1：进程和线程的区别
之前看了2天的多线程,就不看了.现在继续拾起来吧.最近有点松散,多线程内容都是看毕向东的视频以及网络教程和各种书籍 什么是进程? 通俗一点讲,就是正在进行的程序,进程是操作系统控制的基本运行单元: 如 ...
- 使用ETL构建数据仓库的思考
使用ETL构建数据仓库的思考 背景:公司的数据仓库建设项目启动在即,所谓万事开头难,如何在我们数仓建设规划的前期做好业务数据准备和系统建设规划是我们需要思考的问题,这里根据之前的自己参与过的公司ODS ...
- 荷马史诗 NOI2015 解析
比较简单,这道题需要贪心解决. 不需要任何复杂的数据结构,一个luo的堆就足够了. 本题的意思就是:给定n种单词及在文本中各自出现的频率,要求利用二进制串对其进行前缀编码,使得压缩后的文本长度最短. ...