CSS-设置Footer始终在页面底部
Footer顾名思义页脚,如果内容多的时候在底部时感官很好,但是当内容变少(无法撑开一屏的时候)footer不固定在底部,影响美观,对于已经从事前端工作的工作的来说应该是比价工作中入门级别的问题了,由于本人前端水平有限,耗费一点时间最后通过负边距实现了这个简单的功能,代码如下:
<div class="wrapper">
<p>博客地址:http://www.cnblogs.com/xiaofeixiang/</p>
<div class="replace"></div>
</div>
<div class="footer">
博客园-FlyElephant
</div>
设置CSS:
* {
margin: 0;
}
html,
body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: 100%;
margin: 0 auto -202px;//通过负边距隐藏replace
}
.footer,
.replace {
height:200px;//设置高度一致
}
.footer {
border: 1px solid #6AC5AC;
}
无论页面内容长短可以满足开发需求~
CSS-设置Footer始终在页面底部的更多相关文章
- HTML 中使 footer 始终处于页面底部
通常在页面中,需要使页脚 footer 部分始终处于底部.当页面高度不够 100% 时, footer 处于页面最底部,当页面内容高于 100% 时,页脚元素可以被撑到最底部. 方法一:绝对定位 &l ...
- 利用CSS使footer固定在页面底部
1.HTML基本结构 <!DOCTYPEhtml> <htmlxmlns="http://www.w3.org/1999/xhtml"> <headr ...
- 让footer始终位于页面的最底部
http://www.cnblogs.com/wudingfeng/archive/2012/06/29/2569997.html html代码: <div class="contai ...
- 让footer固定在页面底部(CSS-Sticky-Footer)
让footer固定在页面底部(CSS-Sticky-Footer) 这是一个让网站footer固定在浏览器(页面内容小于浏览器高度时)/页面底部的技巧.由HTML和CSS实现,没有令人讨厌的h ...
- 页面内容不够高footer始终位于页面的最底部
相信很多前端工程师在开发页面时会遇到这个情况:当整个页面高度不足以占满显示屏一屏,页脚不是在页面最底部,用户视觉上会有点不好看,想让页脚始终在页面最底部,我们可能会想到用: 1.min-height来 ...
- footer始终在页面最底部的方法(问题待检验)
一.css方法 <style type="text/css"> html,body{ height: 100%; } body{ display: flex; flex ...
- footer固定在页面底部的实现方法总结
方法一:footer高度固定+绝对定位 HTML代码: <body> <header>头部</header> <main>中间内容</main&g ...
- 解决Web开发HTML页面中footer保持在页面底部问题
如图所示如何实现footer在内容不足或者浏览器窗口变大变小的时候一直保持在底部呢?请看如下两种解决方案. 第一种方案: footer高度固定+绝对定位 (兼容性比较好完美兼容IE8+)思路:foot ...
- 在不适用fixed的前提下,当内容较少时footer固定在页面底部
使用css,参考国外的一个解决方法: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ How to use the CSS ...
随机推荐
- 信号量Semaphore的使用
一.概念 Semaphore是一个计数信号量,常用于限制可以访问某些资源(物理或逻辑的)线程数目. 一个信号量有且仅有3种操作,且它们全部是原子的:初始化.增加和减少 增加可以为一个进程解除阻塞: 减 ...
- 图的遍历 之 深搜dfs
DFS 遍历 深度优先搜索是一个递归过程,有回退过程. 对一个无向连通图,在访问图中某一起始顶点u 后,由u 出发,访问它的某一邻接顶点v1:再从v1 出发,访问与v1 邻接但还没有访问过的顶点v2: ...
- Codechef September Challenge 2018 游记
Codechef September Challenge 2018 游记 Magician versus Chef 题目大意: 有一排\(n(n\le10^5)\)个格子,一开始硬币在第\(x\)个格 ...
- Linux与Windows远程互访(使用Rdesktop与SSH)
工作的时候经常使用Redhat系列系统,而平常娱乐文档都是在windows平台上进行.因此实现linux与windows远程互访也是很有必要的事情. 本文将介绍如何实现Linux与Windows的远程 ...
- 回顾JavsScript对象的克隆
JS对象的数据类型分为两大类:原始类型(string, boolean, number,undefined, function)和 对象类型(array, object, null). 1.浅度克隆 ...
- LPCScrypt, DFUSec : USB FLASH download, programming, and security tool, LPC-Link 2 Configuration tool, Firmware Programming
What does this tool do? The LPC18xx/43xx DFUSec utility is a Windows PC tool that provides support f ...
- ChibiOS/RT 2.6.9 CAN Driver
Detailed Description Generic CAN Driver. This module implements a generic CAN (Controller Area Netwo ...
- Go内置库模块 flag
import "flag" flag包实现了命令行参数的解析.每个参数认为一条记录,根据实际进行定义,到一个set集合.每条都有各自的状态参数. 在使用flag时正常流程: 1. ...
- 【报错】RSA host key for 192.168.1.xxx has changed and you have requested strict checking.
执行如下对机拷贝命令 scp .ssh/id_rsa.pub phpgo@192.168.1.35:~ 时,报错 RSA host key for 192.168.1.xxx has changed ...
- 《Go学习笔记 . 雨痕》反射
一.类型(Type) 反射(reflect)让我们能在运行期探知对象的类型信息和内存结构,这从一定程度上弥(mi)补了静态语言在动态行为上的不足.同时,反射还是实现元编程的重要手段. 和 C 数据结构 ...