http://www.cnblogs.com/wudingfeng/archive/2012/06/29/2569997.html

html代码:


<div class="container">
<div cass="header"></div>
 
<div class="body"></div> <div class="footer"></div>
</div>

第一种情况:footer随着滚动条的滚动而滚动

.container{position:relative;width:100%;min-height:100%;}
.body{padding-bottom:50px;}
.footer{height:50px;position:absolute;bottom:0px;left:0px;}

第二种情况:footer始终在其底部固定

.container{position:relative;width:100%;min-height:100%;}
.body{padding-bottom:50px;}
.footer{height:50px;position:fixed;bottom:0px;left:0px;}

注意:

1.千万不能设置.container的高度为100%,否则将无法随滚动条的滚动而滚动.

让footer始终位于页面的最底部的更多相关文章

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

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

  2. 记一些让footer始终位于网页底部的方法

    上次说把网页的头部和尾部分离出来作为一个单独的文件,所有网页共用,这样比较方便修改,然而,,,我发现某些方法里尾部会紧跟在头部后面,把内容挤在下面..而且有的页面内容少的话不能把尾部挤到最下面,所以, ...

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

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

  4. 使用css方法使footer保持在页面的最底部

    使footer保持在页面的底部,是常见的需求,之前面试的时候也遇见了一个这样的问题,今天在这里记录下css实现的方式. 使footer保持在页面的底部,需要考虑header+content部分不够多的 ...

  5. footer部分,当页面主题内容不满一屏时,始终位于页面底部

    比如上面这种情况,footer部分本来应该位于最底部,但是main内容太少导致连在一起,影响美观 解决方案: 给footer加上margin-top:负值 值的大小为footer的高度 写了个小dem ...

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

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

  7. CSS-设置Footer始终在页面底部

    Footer顾名思义页脚,如果内容多的时候在底部时感官很好,但是当内容变少(无法撑开一屏的时候)footer不固定在底部,影响美观,对于已经从事前端工作的工作的来说应该是比价工作中入门级别的问题了,由 ...

  8. javascript实现页面右侧在线客服始终跟随鼠标滚动而上下滚动且始终位于屏幕中间

    效果如图,右侧的联系一栏始终位于页面的中间位置,且随着页面的上下滚动而滚动跟随 css的话没什么好说的,看图 代码 window.onload=window.onresize=window.onscr ...

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

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

随机推荐

  1. kvm : Permission denied

    创建虚拟机类型为:“virt type :kvm” 时,会报如下错误: Could not access KVM kernel module: Permission denied failed to ...

  2. Linux、CentOS系统下调整home和根分区大小

    1.首先查看磁盘使用情况 [root@localhost ~]# df -h 文件系统 容量 已用 可用 已用% 挂载点 Filesystem Size Used Avail Use% Mounted ...

  3. Scala 将BigDecimal转换为Long

    待转换.asInstanceOf[Number].longValue (Double转为Long也适用)

  4. 《windows核心编程》 17章 内存映射文件

    内存映射文件主要用于以下三种情况: 系统使用内存映射文件载入并运行exe和dll,这大量节省了页交换文件的空间以及应用程序的启动时间 开发人员可以使用内存映射文件来访问磁盘上的数据文件.这使得我们可以 ...

  5. 【转】原生js仿jquery一些常用方法

    现在利用扩展原型的方法实现一些jquery函数: 1.显示/隐藏 ? 1 2 3 4 5 6 7 8 9 10 //hide() Object.prototype.hide = function(){ ...

  6. C#绑定事件时使用匿名函数

    当使用一些临时的函数 可以预知这些函数基本不会被复用时  可以使用匿名函数简化代码 public static void startCoupons() { //绑定一些事件 userGetCoupon ...

  7. face++实现人脸识别

    因为项目是在多年前完毕,face++的sdk可能有调整,所以部分功能可能不再适用(2017.3) 近期做了一个使用face++实现人脸识别的功能.当初看着官方文档一点头绪都没有.看了好久才弄明确.所以 ...

  8. SDUTOJ 2712 5-2 派生类的构造函数

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvUl9NaXNheWE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA ...

  9. Silverlight:telerik RadControls中RadGridView的一个Bug及解决办法(转载)

    当RadGridView中嵌套RadComboBox,且RadGridView的高度不够出现滚动条时,上下拉动滚动条后,RadComboBox中的选中值将丢失! 如下图: 滚动条未拖动前 滚动条上下拖 ...

  10. JDK1.9环境变量配置

    JAVA_HOME C:\Program Files\Java\jdk-9.0.1 JRE_HOME C:\Program Files\Java\jre-9.0.1 PATH .;%JAVA_HOME ...