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 ...
随机推荐
- django-QueryDict 对象
在 HttpRequest 对象中,属性 GET 和 POST 得到的都是 django.http.QueryDict 所创建的实例.这是一个 django 自定义的类似字典的类,用来处理同一个键带多 ...
- [CC-FNCS]Chef and Churu
[CC-FNCS]Chef and Churu 题目大意: 一个长度为\(n(n\le10^5)\)的数列\(A_{1\sim n}\),另有\(n\)个函数,第\(i\)个函数会返回数组中标号在\( ...
- 使用UltraISO制作Windows 10启动U盘
1.从官方网站下载制作工具UltraISO:http://cn.ultraiso.net/uiso9_cn.exe 这是个试用版,但也足够用一次了. 2.在电脑上插入一块U盘,容量最好不少于8GB,接 ...
- 狗日的系统之家下载的Windows 10 1803/1809系统不干净,捆绑自动安装腾讯关键等软件
特此记录一下,如果网友看到这篇文章请不要下载它们家的,捆绑软件,并且安装自动设置了账号,这还不是修改,是啥? 我们都知道现在iso文件基本都是网友自行制作的,从微软下载的文件自行制作成iso,也就是现 ...
- spring-boot 速成(12) - 如何注入多个redis StringRedisTemplate
默认情况下,spring-boot的redis自动配置,只能注册一个StringRedisTemplate实例,如果希望注入多个,比如:1个读写database 0,1个读写database 1 .. ...
- 《Go语言实战》摘录:7.1 并发模式 - runner
7.1 并发模式 - runner
- 反击黑客之对网站攻击者的IP追踪
ip追踪是一件比较难实现的,因为我只有一个ip,而且在没有任何技术支持下对该ip追踪,同时我在公司也没有服务器权限,仅有后台,一般的ip追踪技术分类,反应式ip追踪,主动式的追踪,分享的只是一个过程, ...
- VisualStudio:添加现有项时使用添加为链接
这个特性很容易忘记使用(很多人可能还不知道),这里解释一下. 添加为链接是指:将指定的文件作为链接添加到项目中,这个文件在作用上和一般的文件没有区别,这样做的好处是可以多个项目共享一个文件,如:连接字 ...
- Unity3D 中鼠标按下时OnMouseDown()、Input.GetMouseButtonDown()和EventType.MouseDown的响应验证
初学unity3D,对于其中的事件响应不是很清楚,于是写了下面的代码来验证: 1.新建.cs文件,名为testMouse.cs: using UnityEngine; using System.Col ...
- JQuery攻略(一) 基础知识——选择器 与 DOM
JQuery是功能丰富的Javascript库,可以帮助用户毫不费力地把动态功能应用到网页. JQuery具有许多强大的功能,包括访问部分网页,快速修改网页内容,添加动画,应用AJAX技术等等. 正因 ...