<!doctype html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<title>Document</title>
<style>
html,
body {
margin:0;
padding:0;
height: 100%;
}

body>.wrap {
min-height: 100%;
}

.content {
/* padding-bottom 等于 footer 的高度 */
padding-bottom: 60px;
background-color: red;
}
p{
margin:0;
padding:0;
height: 30px;
background-color: blue;
}
.footer {
width: 100%;
height: 60px;
/* margin-top 为 footer 高度的负值 */
margin-top: -60px;
background-color: yellow;
}
</style>
</head>

<body>
<div class="wrap">
<div class="content">
<p>填充内容</p>
<p>填充内容</p>
<p>填充内容</p>
<p>填充内容</p>
<p>填充内容</p>
<p>填充内容</p>
</div>
</div>
<div class="footer">
这是页脚
</div>
</body>

</html>

sticky footer 布局的更多相关文章

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

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

  2. 【CSS】Sticky Footer 布局

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

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

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

  4. css sticky footer 布局 手机端

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

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

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

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

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

  7. sticky footer布局

    一.什么是sticky footer 在网页设计中,Sticky footers设计是最古老和最常见的效果之一.它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部:如果内容足够长时,页脚块 ...

  8. css sticky footer 布局

    方法一:footer 上用负的 margin-top 在内容外面需要额外包一层元素(wrap)来让它产生对应的 padding-bottom.是为了防止负 margin 导致 footer 覆盖任何实 ...

  9. css sticky footer布局

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

随机推荐

  1. Alley Bird 跳跳鸟源码

    <跳跳鸟Alley Bird>是一款敏捷小游戏.<跳跳鸟Alley Bird>采用了点击屏幕操作玩法,非常简单易上手,同时游戏内容也趣味性十足.<跳跳鸟Alley Bir ...

  2. Quagga的安装和使用

    Quagga的安装和使用 测试环境:VM 12   CentOS 6.5 64位 Quagga是一款功能比较强大的开源路由软件,支持rip, ospf,bgp等协议. 1.       Quagga的 ...

  3. XFF的学习+修改源码--Are you in class

    这几天有做天枢CTF的“Are you in class”的题目,虽然以前了解过XFF,但还是没有很好地应用,而且最后居然掉进了一个大坑,且听我细细讲来.   打开题目,首先有个提示“在不在学校主要看 ...

  4. stm32学习基本知识点

    1.AHB系统总线分为APB1(36MHz)和APB2(72MHz),其中2>1,意思是APB2接高速设备 2.Stm32f10x.h相当于reg52.h(里面有基本的位操作定义),另一个为st ...

  5. HDU 4027 Can you answer these queries? (线段树区间修改查询)

    描述 A lot of battleships of evil are arranged in a line before the battle. Our commander decides to u ...

  6. [leetcode]678. Valid Parenthesis String验证有效括号字符串

    Given a string containing only three types of characters: '(', ')' and '*', write a function to chec ...

  7. Await Async和Thread.waitAll想法?未完待续

    [管理员]四九-李冰-修行者(2216529884) 2017/7/3 17:15:12 看着就可以了,这种东西是有使用场景的.并不是你用了就一定有提升的 [管理员]上海-xx科技(lovepoint ...

  8. 关于document的节点；用Dom2创建节点；

    一.关于节点 1.节点树状图 document>documentElement>body>tagName 2.节点类型 元素节点(标签).文本节点(文本).属性节点(标签属性) 3. ...

  9. c#devexpres TreeList 最简单显示动态值的应用

    为了让数据显示在行内,也为熟练一下devexpress treelist  控件, 查找了很多,最多的是先把数据放在datatable  表里边, 然后赋值给treelist的datasource 的 ...

  10. BZOJ 3331 [BeiJing2013]压力-Tarjan + 树上差分

    Solution Tarjan 点双缩点, 加上树上差分计算. 注意特判... 我特判挂了好久呜呜呜 Code #include<cstdio> #include<cstring&g ...