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 ...
随机推荐
- ViewPager 无限循环
Overview 我们在使用ViewPager来制作图片轮播的时候,常常为ViewPager不能一直无限循环的问题所苦恼.对于这个问题,目前从网上找到了两个思路来解决: 将 ViewPager 的Co ...
- Xamarin iOS教程之自定义视图
Xamarin iOS教程之自定义视图 Xamarin iOS自定义视图 工具栏中的视图在实际应用开发中用的很多,但是为了吸引用户的眼球,开发者可以做出一些自定义的视图. [示例2-33]以下将实现一 ...
- 数据转换bug花了半天时间 Java.math.BigDecimal cannot be cast to java.lang.String
从数据库取出一个 Count函数 统计的值 在代码中要转成Integer类型的时候 Integer.parseInt((String)map.get("ID_")) 报了一下错误: ...
- BZOJ2888 : 资源运输
显然资源集合处就是树的重心,这题需要动态维护树的重心. 每个连通块以重心为根,用link-cut tree维护每个点的子树大小以及子树内所有点到它的距离和. 合并两个连通块时,考虑启发式合并,暴力往大 ...
- Linux学习笔记09—Sqlyog链接mysql配置
第一步打开Linux命令窗口,进入超级用户.命令:[test@localhost ~]$ suPassword:输入超级用户密码第二步启动Mysql服务命令:[root@localhost test] ...
- AtomicReference,AtomicStampedReference与AtomicMarkableReference的区别
AtomicReference 通过volatile和Unsafe提供的CAS函数实现原子操作. 自旋+CAS的无锁操作保证共享变量的线程安全 value是volatile类型,这保证了:当某线程修改 ...
- STM32 F4 DAC DMA Waveform Generator
STM32 F4 DAC DMA Waveform Generator Goal: generating an arbitrary periodic waveform using a DAC with ...
- .Net Discovery系列之十一-深入理解平台机制与性能影响 (中)
上一篇文章中Aicken为大家介绍了.Net平台的垃圾回收机制与其对性能的影响,这一篇中将继续为大家介绍.Net平台的另一批黑马—JIT. 有关JIT的机制分析 ● 机制分析 以C#为例, ...
- Java异常(三) 《Java Puzzles》中关于异常的几个谜题
概要 本章介绍<Java Puzzles>中关于异常的几个谜题.这一章都是以代码为例,相比上一章看起来更有意思.内容包括:谜题1: 优柔寡断谜题2: 极端不可思议谜题3: 不受欢迎的宾客谜 ...
- Apache Tomcat 9 Installation on Linux (RHEL and clones)
Apache Tomcat 9 is not available from the standard RHEL distributions, so this article provides info ...