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 ...
随机推荐
- Quartz带参数任务的创建与修改
需求背景:创建的quartz任务需要用到三个参数,根据参数去执行并将结果入库,并且参数可修改更新. 这里,有三个参数需要传入,分别是planId.target.officeId 定义Job类: pub ...
- 在centOS中安装mongodb
自己在一个CentOS6.6的系统中按照官网的说明,走了一遍的安装过程,记录一下. 看过个mongo的视频,上面介绍的安装是用源码安装,而官网上说需要gcc4.8.3的版本,还有scons的编译工具, ...
- Spark 实践——音乐推荐和 Audioscrobbler 数据集
本文基于<Spark 高级数据分析>第3章 用音乐推荐和Audioscrobbler数据 完整代码见 https://github.com/libaoquan95/aasPractice/ ...
- springmvc下载文件
Controller内代码: @RequestMapping(value = "/upload") public ResponseEntity<byte[]> uplo ...
- Activiti的ACT_GE_PROPERTY表初始化
create table ACT_GE_PROPERTY ( NAME_ ), VALUE_ ), REV_ integer, primary key (NAME_) ) ENGINE=InnoDB ...
- power shell 常用查询－查看操作系统信息
https://technet.microsoft.com/en-us/library/dd367892.aspx 首推使用 Get-Counter 该函数下可以把现有的电脑监控统计数据 直接提取出来 ...
- JVM学习笔记(四)：类加载机制
虚拟机把描述类的数据从Class文件加载到内存,并对数据进行校验.转换解析和初始化,最终形成可以被虚拟机直接使用的Java类型,这就是虚拟机的类加载机制. 一.类加载的时机1. 类从被加载到虚拟机内存 ...
- 在VMware Workstation上安装Ubuntu 16.04 Server操作系统
Ubuntu 16.04 Server的下载 http://www.ubuntu.org.cn/download/server 按空格键(Space)选中第一个ssh服务 成功!
- 洛谷 P2336 [SCOI2012]喵星球上的点名 解题报告
P2336 [SCOI2012]喵星球上的点名 题目描述 a180285 幸运地被选做了地球到喵星球的留学生.他发现喵星人在上课前的点名现象非常有趣. 假设课堂上有 \(N\) 个喵星人,每个喵星人的 ...
- （转）每天一个linux命令（9）：touch 命令
linux的touch命令不常用,一般在使用make的时候可能会用到,用来修改文件时间戳,或者新建一个不存在的文件. 1 基本使用 1．命令格式: touch [选项]... 文件... 2．命令参数 ...