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始终在页面底部的更多相关文章

  1. HTML 中使 footer 始终处于页面底部

    通常在页面中,需要使页脚 footer 部分始终处于底部.当页面高度不够 100% 时, footer 处于页面最底部,当页面内容高于 100% 时,页脚元素可以被撑到最底部. 方法一:绝对定位 &l ...

  2. 利用CSS使footer固定在页面底部

    1.HTML基本结构 <!DOCTYPEhtml> <htmlxmlns="http://www.w3.org/1999/xhtml"> <headr ...

  3. 让footer始终位于页面的最底部

    http://www.cnblogs.com/wudingfeng/archive/2012/06/29/2569997.html html代码: <div class="contai ...

  4. 让footer固定在页面底部(CSS-Sticky-Footer)

    让footer固定在页面底部(CSS-Sticky-Footer)     这是一个让网站footer固定在浏览器(页面内容小于浏览器高度时)/页面底部的技巧.由HTML和CSS实现,没有令人讨厌的h ...

  5. 页面内容不够高footer始终位于页面的最底部

    相信很多前端工程师在开发页面时会遇到这个情况:当整个页面高度不足以占满显示屏一屏,页脚不是在页面最底部,用户视觉上会有点不好看,想让页脚始终在页面最底部,我们可能会想到用: 1.min-height来 ...

  6. footer始终在页面最底部的方法(问题待检验)

    一.css方法 <style type="text/css"> html,body{ height: 100%; } body{ display: flex; flex ...

  7. footer固定在页面底部的实现方法总结

    方法一:footer高度固定+绝对定位 HTML代码: <body> <header>头部</header> <main>中间内容</main&g ...

  8. 解决Web开发HTML页面中footer保持在页面底部问题

    如图所示如何实现footer在内容不足或者浏览器窗口变大变小的时候一直保持在底部呢?请看如下两种解决方案. 第一种方案: footer高度固定+绝对定位 (兼容性比较好完美兼容IE8+)思路:foot ...

  9. 在不适用fixed的前提下,当内容较少时footer固定在页面底部

    使用css,参考国外的一个解决方法: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ How to use the CSS ...

随机推荐

  1. Java中实现多线程的两种方式之间的区别

    Java提供了线程类Thread来创建多线程的程序.其实,创建线程与创建普通的类的对象的操作是一样的,而线程就是Thread类或其子类的实例对象.每个Thread对象描述了一个单独的线程.要产生一个线 ...

  2. BZOJ.2134.[国家集训队]单选错位(概率 递推)

    题目链接 如题目中的公式,我们只要把做对每个题的概率加起来就可以了(乘个1就是期望). 做对第i道题的概率 \[P_i=\frac{1}{max(a_{i-1},a_i)}\] 原式是 \(P_i=\ ...

  3. KVM源代码解读:linux-3.17.4\arch\x86\include\asm\kvm_host.h

    /* * Kernel-based Virtual Machine driver for Linux * * This header defines architecture specific int ...

  4. 16、Redis手动创建集群

    写在前面的话:读书破万卷,编码如有神 --------------------------------------------------------------------------------- ...

  5. URAL 1962 In Chinese Restaurant 数学

    In Chinese Restaurant 题目连接: http://acm.hust.edu.cn/vjudge/contest/123332#problem/B Description When ...

  6. Codeforces Round #515 (Div. 3)

    Codeforces Round #515 (Div. 3) #include<bits/stdc++.h> #include<iostream> #include<cs ...

  7. kettle的基本介绍

    Kettle 主要内容: 一.ETL介绍 二.Kettle介绍 三.Java调用Kettle API 一.ETL介绍 1. ETL是什么? 1).ETL分别是“Extract”.“ Transform ...

  8. 导出文件在IE和火狐中文件名乱码问题的解决

    $ua = $_SERVER["HTTP_USER_AGENT"]; $filename = "客户数据.xls"; $encoded_filename = u ...

  9. 百度公共dns

    常用公共DNS服务器地址 DNS(Domain Name System),即域名解析系统,作为将域名和IP地址相互映射的一个分布式数据库,能够使人通过相对好记的域名访问网站,而是一串数字.目前国内运营 ...

  10. 关于curl: (2) Failed Initialization

    一開始是由于curl无法訪问https网上说,要又一次编译安装curl 我就下载.. ./configure make make install 结果出现 curl: (2) Failed Initi ...