方法一：footer 上用负的 margin-top

  • 在内容外面需要额外包一层元素(wrap)来让它产生对应的 padding-bottom。是为了防止负 margin 导致 footer 覆盖任何实际内容。
//html结构

<body>

<div id="wrap">

	<div id="main">

		main<br/>

		main<br/>

	</div>

</div>

<div id="footer"></div>

</body>

//css样式

html, body {

  height: 100%;

  margin: 0;

}

#wrap{

	width: 100%;

    min-height: 100%;

}

/*内容区需要让出一部分区域，防止内容被盖住*/

#main{

    padding-bottom: 30px;

}

//wrap包裹内容的最小高度是100%，此时将footer的部分通过margin-top拉上去30px。

#footer{

    width: 100%;

    height: 30px;

    background-color: yellow;

    margin-top: -30px;

}


 

方法二：负margin-bottom

  • 用一个元素将除了 footer 之外的其他内容包起来。给它设一个负的 margin-bottom，让它正好等于 footer 的高度。这是一个最基本的方法。
<body>

  <div class="wrapper">

      content

    <div class="push"></div>

  </div>

  <footer class="footer"></footer>

</body>

//css样式

html, body {

  height: 100%;

  margin: 0;

}

.wrapper {

  min-height: 100%;

  margin-bottom: -50px;

}

.footer,

.push {

  height: 50px;

}

复制代码
 

方法三：flex布局

  • Web 设计中固定高度通常都不好，内容可能改变，我们需要footer灵活性。固定高度通常要被亮红灯。使用 flexbox 来实现粘连 footer 不仅不需要任何额外的元素，还可以支持 footer 可变高度。
//html结构

<body>

  <div class="content">

    content

  </div>

  <footer class="footer"></footer>

</body>

//css样式

html {

  height: 100%;

}

body {

  min-height: 100%;

  display: flex;

  flex-direction: column;

}

.content {

  flex: 1;

}

.footer{

	height: 50px;

    background-color: red;

}

复制代码
  • 甚至可以添加一个 header 到 .content 前面或者其他更多内容到后面。使用 flexbox 的诀窍是：
  • 设置 flex: 1 在你希望自动填充窗口空间的子元素上（在我们的例子里是 .content 元素）。
  • 可以设置 margin-top:auto 来让子元素尽可能远离它前面的元素（或者根据需要选择任意一个方向的 margin）。（上面的 flex:1 也可以用 margin-bottom:auto，内容垂直居中可以用margin:auto 0，flex 布局很奇妙吧）

css sticky footer 布局的更多相关文章

  1. css sticky footer 布局 手机端

    什么是css sticky footer 布局? 通常在手机端写页面 会遇到如下情况 页面长度很短不足以撑起一屏,此时希望页脚在页面的底部 而当页面超过一屏时候,页脚会在文章的底部 ,网上有许多办法, ...

  2. css sticky footer布局

    Sticky footers设计是最古老和最常见的效果之一,大多数人都曾经经历过.它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部:如果内容足够长时,页脚块会被内容向下推送.套路为:内容 ...

  3. 【CSS】Sticky Footer 布局

    什么是 Sticky Footer 布局? Sticky Footer 布局是一种将 footer 吸附在底部的CSS布局. footer 可以是任意的元素,该布局会形成一种当内容不足,footer ...

  4. 【css技能提升】完美的 Sticky Footer 布局

    在总结之前所做的项目时,遇到过下面这种情况. 在主体内容不足够多或者未完全加载出来之前,就会导致出现左边的这种情况,原因是因为没有足够的垂直空间使得页脚推到浏览器窗口最底部.但是,我们期望的效果是页脚 ...

  5. CSS Sticky Footer

    ----CSS Sticky Footer 当正文内容很少时,底部位于窗口最下面.当改变窗口高度时,不会出现重叠问题. ----另一个解决方法是使用:flexBox布局  http://www.w3c ...

  6. 两种最常用的Sticky footer布局方式

    Sticky footer布局是什么? 我们所见到的大部分网站页面,都会把一个页面分为头部区块.内容区块和页脚区块,当头部区块和内容区块内容较少时,页脚能固定在屏幕的底部,而非随着文档流排布.当页面内 ...

  7. 前端经典布局：Sticky footer 布局

    什么是Sticky footer布局?前端开发中大部分网站,都会把一个页面分为头部区块.内容区块.页脚区块,这也是比较.往往底部都要求能固定在屏幕的底部,而非随着文档流排布.要实现的样式可以概括如下: ...

  8. CSS Sticky Footer: 完美的CSS绝对底部

    CSS的简单在于它易学,CSS的困难在于寻找更好的解决方案.在CSS的世界里,似乎没有完美这种说法.所以,现在介绍的CSS绝对底部,只是目前个人见过的方案中比较完美的吧. 先说我们为什么会使用到这个C ...

  9. sticky footer布局，定位底部footer

    其作用就是当内容区域比较少时,让footer也能正常定位到底部,以前我们使用js来达到这种效果,其实用css也是完全可以的 <!DOCTYPE html> <html lang=&q ...

随机推荐

  1. Zookeeper入门(六)之zkCli.sh对节点的增删改查

    参考地址为:https://www.cnblogs.com/sherrykid/p/5813148.html 1.连接 在 bin 目录下的  zkCli.sh  就是ZooKeeper客户端 ./z ...

  2. Java连接MQTT服务-wss方式

    特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/ ...

  3. python3笔记十九：os和ospath模块

    一:学习内容 os模块 ospath模块 获取指定目录下所有文件和目录 二:os模块 包含了普遍的操作系统功能,需要导入该模块:import os 当前所在位置目录结构为: 目录操作 1.获取当前目录 ...

  4. ES6 正则的扩展（待细读）

    1.RegExp构造函数 在 ES5 中,RegExp构造函数的参数有两种情况. a.参数是字符串,这时第二个参数表示正则表达式的修饰符(flag) var regex = new RegExp('x ...

  5. 导入 kotlin（7）

    导入包 除了默认导入之外,每个文件可以包含它自己的导入指令. 导入语法在语法中讲述.可以导入一个单独的名字,如.import foo.Bar // 现在 Bar 可以不用限定符访问也可以导入一个作用域 ...

  6. Django admin 设置和定制

    models 在 models.py 中定义,每个 model 是一个 class: from django.db import models class PerformanceData(models ...

  7. ControlTemplate in WPF —— TreeView

    <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" x ...

  8. Spring Cloud负载均衡：使用Feign作客户端负载均衡

    有了一篇服务端负载均衡后,再来一篇客户端负载均衡,客户端负载均衡很简单,无需在zuul中做多余配置(本示例不引入zuul),只需要在客户端进行Feign引入和配置即可. 准备工作很简单,实现客户端负载 ...

  9. Linux 查找当前目录下 包含特定字符串 的所有文件

    使用 Linux 经常会遇到这种情况:只知道文件中包含某些特定的字符串,但是不知道具体的文件名.需要根据“特定的字符串”反向查找文件. 示例(路径文件如下): ./miracle/luna/a.txt ...

  10. python关键字参数和位置参数

    关键字参数必须跟随在位置参数后面! 因为python函数在解析参数时, 是按照顺序来的, 位置参数是必须先满足, 才能考虑其他可变参数.,否则报错如下: In [74]: print(s1.forma ...