页脚动态贴在底部需要满足以下两个条件：

  • 当主体的内容高度不超过可视区域高度的时候，页脚贴在页面底部。
  • 当主体的内容高度超过可视区域高度的时候，页脚将按正常布局。

方法一：footer高度固定+绝对定位

<body>

    <header>header</header>

    <main>content</main>

    <footer>footer</footer>

</body>
html{height:100%;}

body{min-height:100%;margin:0;padding:0;position:relative;}

header{background-color: #ffe4c4;}

main{padding-bottom:100px;background-color: #bdb76b;}

footer{position:absolute;bottom:0;width:100%;height:100px;background-color: #ffc0cb;}

方法二：footer高度固定+margin负值

<body>

    <div class="container">

        <header>header</header>

        <main>main content</main>

    </div>

    <footer>footer</footer>

</body>
html,body{height:100%;margin:0;padding:0;}

.container{min-height:100%;}

header{background-color: #ffe4c4;}

main{padding-bottom:100px;background-color: #bdb76b;}/* main的padding-bottom值要等于或大于footer的height值 */

footer{height:100px;margin-top:-100px;background-color: #ffc0cb;}

方法三：css table实现的圣杯布局

<div class="wrapper">
  <div class="header">头部</div>
  <div class="main">
    <div class="box sidebar">左侧栏</div>
    <div class="box content">主体内容</div>
    <div class="box sidebar">有侧栏</div>
  </div>
  <div class="footer">页脚底部</div>
</div>
body {
  background: @beige;
  color: black;
}

.wrapper {
  height: 100%;
  display: table;
  width: 100%;
  text-align: center;
}

.header {
  display: table-row;
  height: 1px;
  background: @yellow;
}

.main {
  height: 100%;
  display: table;
  width: 100%;
}

.box {
  display: table-cell;
}

.sidebar {
  width: 100px;
  background: @orange;
}

.footer {
  display: table-row;
  height:1px;
  background: @green;
  color: @beige;
}

@orange: #BD4932;
@yellow: #FFD34E;
@green: #105B63;
@beige: #FFFAD5;
 
 
 

页面footer在底部的更多相关文章

  1. 网页布局中页面内容不足一屏时页脚footer固定底部

    方法一:给html.body都设置100%的高度,确定body下内容设置min-height有效,然后设置主体部分min-height为100%,此时若没有header.footer则刚好完美占满全屏 ...

  2. 页面滚动到底部自动 Ajax 获取文章

    页面滚动到底部自动 Ajax 获取文章  代码如下 复制代码 var _timer = {};function delay_till_last(id, fn, wait) {    if (_time ...

  3. CSS实现Footer固定底部，超过一屏自动撑开

    方法一:给html.body都设置100%的高度,确定body下内容设置min-height有效,然后设置主体部分min-height为100%,此时若没有header.footer则刚好完美占满全屏 ...

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

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

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

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

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

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

  7. Sticky Footer 绝对底部的两种套路

    最近面了好几个前端,工作经验有高有低,居然都不知道绝对底部是什么,也没有人能说出一种实现方式,让我不禁感慨前端领域的良莠不齐 绝对底部,或者说 Sticky Footer,是一种古老且经典的页面效果: ...

  8. 固定footer在底部

    作者:李宇链接:https://www.zhihu.com/question/23220983/answer/25880123来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出 ...

  9. 始终让footer在底部

    1.footer保持在页面底部 需求: 我们希望footer能在窗口最底端,但是由于页面内容太少,无法将内容区域撑开,从而在 footer 下面会留下一大块空白 第一种方法:采用 flexbox布局模 ...

随机推荐

  1. NOIP2016 DAY2 T2蚯蚓

    传送门 Description 本题中,我们将用符号[c]表示对c向下取整,例如:[3.0」= [3.1」=[3.9」=3.蛐蛐国最近蚯蚓成灾了!隔壁跳 蚤国的跳蚤也拿蚯蚓们没办法,蛐蛐国王只好去请神 ...

  2. [tyvj1935 Poetize3]导弹防御塔 (二分图多重匹配)

    传送门 Description Freda控制着N座可以发射导弹的防御塔.每座塔都有足够数量的导弹,但是每座塔每次只能发射一枚.在发射导弹时,导弹需要T1秒才能从防御塔中射出,而在发射导弹后,发射这枚 ...

  3. Redis学习笔记(二) - 主从复制

    概述 指将一台redis服务器上的数据,复制到其他redis服务器上,前者称为主服务器(master),后者称为从服务器(slave). 默认情况下主从关系为一对多关系. 数据复制是单向的,只能从主服 ...

  4. Ubuntu Server下docker实战 01: 安装docker

    本系列文章主旨在于使用docker来搭建实际可用的基础服务,具体到每一步的操作和设置. 关于docker的原理.前世今生的内容,园子里已经有太多的文章了,此处就不再赘述. 要使用docker,当然第一 ...

  5. 编码的由来，ASCII编码，和字节的形成

    一.编码的由来 计算机只能计算和识别二进制,必须让计算机识别文字,才能和计算机进行交互,彼此也才能通过计算机通信. 由此,有了ASCII编码的诞生,它起始于50年代后期,在1967年定案,是最初美国国 ...

  6. vue项目初始化结构

  7. [bzoj1001][BeiJing2006]狼抓兔子_网络流_最小割转对偶图

    狼抓兔子 bzoj-1001 BeiJing2006 Description 现在小朋友们最喜欢的"喜羊羊与灰太狼",话说灰太狼抓羊不到,但抓兔子还是比较在行的, 而且现在的兔子还 ...

  8. Vijos——T 1092 全排列

    https://vijos.org/p/1092 描述 输入两个自然数m,n 1<=n<=20,1<=m<=n!输出n个数的第m种全排列. 如 :输入 3 1输出 1 2 3 ...

  9. 从编程的角度理解gradle脚本﹘﹘Android Studio脚本构建和编程[魅族Degao]

    本篇文章由嵌入式企鹅圈原创团队.魅族资深project师degao撰写. 随着Android 开发环境从Eclipse转向Android Studio,我们每一个人都開始或多或少要接触gradle脚本 ...

  10. CodeForces - 344A Magnets (模拟题)

    CodeForces - 344A id=46664" style="color:blue; text-decoration:none">Magnets Time ...