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 ...
随机推荐
- linq to sql中的自动缓存(对象跟踪)
linq to sql中,对于同一个DataContext上下文环境,根据表主键选择记录时(当然这里所指的“记录”会自动转成“对象”),如果该记录已经被select过,默认情况下会被自动缓存下来,下次 ...
- “数学口袋精灵”第二个Sprint计划(第五天)
“数学口袋精灵”第二个Sprint计划----第五天进度 任务分配: 冯美欣:欢迎界面的背景音乐完善 吴舒婷:游戏界面的动作条,选择答案后的音效 林欢雯:代码算法设计 进度: 冯美欣:欢迎界面背景 ...
- Daily Scrum 10.21
然后由于服务器端有变化,另外具体IDE已经确定,接下来对已经分配下去的任务做些细节补充: 10.20日晚所有人必须完成AS的配置,统一版本为1.3.2,安卓版本为4.4.0,可视化界面手机为Nexus ...
- python数据分析Adult-Salary预测
具体文档戳下方网站 https://pan.wps.cn/l/s4ojed8 代码如下: import pandas as pdimport numpy as npimport matplotlib. ...
- 使用Samba服务程序，让linux系统之间共享文件
yum install -y cifs-utils mkdir /database 创建挂载目录 在root家目录创建认证文件(依次为SMB用户名.SMB用户密码.SMB共享域) v ...
- multer详解
Express默认并不处理HTTP请求体中的数据,对于普通请求体(JSON.二进制.字符串)数据,可以使用body-parser中间件.而文件上传(multipart/form-data请求),可以基 ...
- 淘宝卖家搜索器V1.6算法注册机。
该软件的算法非常简单,适合小白练手.(E语言写的)1.OD加载该软件,输入bp MessageBoxA 2.点击注册 3.OD就会中断下来了 4.按ALT+K打开调用堆栈 5.往上翻,就来到算法处了 ...
- Emacs_快捷键列表
Emacs_快捷键列表 emacs -nw 以终端模式运行emacsLC_CTYPE=zh_CN.UTF-8 emacs C = Control M = Meta = Alt | EscAlt 可以粘 ...
- MT【202】内准圆
双曲线$\dfrac{x^2}{4}-\dfrac{y^2}{12}=1$ 的右焦点为 F,左准线为 L. 椭圆C 以F和L为其的焦点及准线,过F作一条斜率为 1 的直线交椭圆C于点A和B. 若椭圆C ...
- MT【75】考察高斯函数的一道高考压轴题
解答:答案1,3,4. 这里关于高斯函数$[x]$的一个不等式是需要知道的$x-1<[x]\le x$,具体的: