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 ...
- KNN与SVM对比&SVM与逻辑回归的对比
首先说一下两种学习方式: lazy learning 和 eager learning. 先说 eager learning, 这种学习方式是指在进行某种判断(例如,确定一个点的分类或者回归中确定 ...
- android 多进程
韩梦飞沙 韩亚飞 313134555@qq.com yue31313 han_meng_fei_sha android应用中 可以通过 清单文件的属性配置,创建出一个新进程. 多进程的好处,当 ...
- NOIP2015其余几道题
T1: #include<cstdio> #include<cstring> #include<algorithm> #include<cmath> # ...
- bzoj 1171 并查集优化顺序枚举 | 线段树套单调队列
详见vfleaking在discuss里的题解. 收获: 当我们要顺序枚举一个序列,并且跳过某些元素,那么我们可以用并查集将要跳过的元素合并到一起,这样当一长串元素需要跳过时,可以O(1)跳过. 暴力 ...
- Activator 动态构造对象
Activator 意义: 用于动态构造对象 语法1: 根据指定的泛型类型构造对象 Activator.CreateInstance<类型>() 语法2: 根据程序集和类型名构造对象 S ...
- 有强大的cURL,忘掉httpclient的吧!
这段时间想做一个网页采集的程序,由于一网站采用了防采集的办法,我的httpclient总是在登录后无法获取到我想要过去的链接.在无数次的跟踪过后发现原来人家给返回的是javascript拼成的页面,而 ...
- 为什么不要在 JavaScript 中使用位操作符?
如果你的第一门编程语言不是 JavaScript,而是 C++ 或 Java,那么一开始你大概会看不惯 JavaScript 的数字类型.在 JavaScript 中的数字类型是不区分什么 Int,F ...
- VMware安装MikroTik RouterOS chr
简单步骤: 1.官网下载ova镜像 2.导入到vmware即可.
- POJ 2546 & ZOJ 1597 Circular Area(求两圆相交的面积 模板)
题目链接: POJ:http://poj.org/problem? id=2546 ZOJ:problemId=597" target="_blank">http: ...