html部分
<div id="wrap">
<div id="main" class="clearfix">
<div id="content"></div>
<div id="side"></div>
</div>
</div>
<div id="footer"></div>

css部分

*{padding: 0;margin: 0;}
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 150px;} /* 必须使用和footer相同的高度 */
#footer {position: relative;margin-top: -150px; /* footer高度的负值 */height: 150px;clear:both;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}

  

 

css经典布局—stick footer布局的更多相关文章

  1. css 中 stick footer 布局实现

    做项目中,我们在写弹框的时候,不管弹框的内容多或者少,可能需要一些内容需要固定在框底部,比如关闭按钮.stick footer 就是让 footer 元素固定在底部 当内容不足满屏时,footer 紧 ...

  2. div+css经典三行两列布局

    写在前面 在面试的时候遇到这样一个笔试题,使用div+css布局一个三行两列的页面.这里主要考察的是css中postion的具体用法.详细信息可参考我这篇文章: [HTML/CSS]说说positio ...

  3. stick footer布局

    需求: 将footer固定到底部.文章内容不足满屏时 footer在底部,超过满屏时footer在内容末尾. 方法一: <div id="wrap"> <div ...

  4. 网页footer背景(stick footer布局)

    今天遇到了一个有意思的问题,想在网站的foot里面加入一张背景图片,并且在footer的底部写下一些内容于是乎在footer添加了background,并设置了footer的大小 先说一下开始的做法: ...

  5. CSS布局经典—圣杯布局与双飞翼布局

    在我之前的博客网页整体布局完全剖析-剖完你不进来看一下么?中总结单列.两列.三列固宽与变宽布局,我还以为已经囊括了所有经典的网页布局方法了呢,当然除了CSS3的弹性盒模型没有涉及到,现在看来确实是自己 ...

  6. 只要一行代码,实现五种 CSS 经典布局

    常用的页面布局,其实就那么几个.下面我会介绍5个经典布局,只要掌握了它们,就能应对绝大多数常规页面. 这几个布局都是自适应的,自动适配桌面设备和移动设备.代码实现很简单,核心代码只有一行,有很大的学习 ...

  7. css经典布局学习

    . 布局 布局是css的重头戏,每个系统的布局都有其各自的特点.无好无坏,肯定是各有优缺点,不妨拿出几个比较典型的例子来一起分析一下.例如: 经典三列布局 Bootstrap栅格布局 百度首页布局 微 ...

  8. 【CSS】Sticky Footer 布局

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

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

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

随机推荐

  1. [转载] Java中常用的加密方法

    转载自http://www.iteye.com/topic/1122076/ 加密,是以某种特殊的算法改变原有的信息数据,使得未授权的用户即使获得了已加密的信息,但因不知解密的方法,仍然无法了解信息的 ...

  2. python进阶-------进程线程(二)

    Python中的进程线程(二) 一.python中的"锁" 1.GIL锁(全局解释锁) 含义: Python中的线程是操作系统的原生线程,Python虚拟机使用一个全局解释器锁(G ...

  3. CloudStack架构分析

    Cloudstack功能 作为云计算解决方案,毫无疑问,以下几点是服务的核心关键(不限于以下几点),也作为后续开发和使用的出发点: 1. 支持多租户 2. 能够按需提供自服务 3. 宽带网络的接入 4 ...

  4. 使用apache进行域名绑定

    [背景] 项目需要搭建一套mysqlapi的开发环境,进行域名绑定 [方法] 主要方式通过修改apache的vhost配置文件,重启apache服务,以及最终在客户端绑定hosts. 1.查看apac ...

  5. 深入学习JS执行--创建执行上下文(变量对象,作用域链,this)

    一.介绍 本篇继上一篇深入理解js执行--单线程的JS,这次我们来深入了解js执行过程中的执行上下文. 本篇涉及到的名词:预执行,执行上下文,变量对象,活动对象,作用域链,this等 二.预执行 在上 ...

  6. python3学习笔记(2)

    一.面向对象(初识)由类和方法组成,类里面封装了很多功能,根据这个类,可以创建一个这个类的对象,即对象是根据这个类创建的,以后这个对象要使用某个功能的时候就从这个类里面的找.例:str -功能一 -功 ...

  7. GacUtil

    编辑本段工具简介 全局程序集缓存工具 (Gacutil.exe) 管理程序集缓存的 .NET 实用工具库还提供一种命令行接口工具,名为全局程序集缓存实用工具 (Gacutil.exe). 编辑本段命令 ...

  8. buttongroup中content一次性加载的解决方法

    buttongroup一次性加载所有内容的解决方法 如下图所示: 第一步: 设置windowcontainer的autoLoad属性为false(默认情况下autoLoad属性为true,所以会加载所 ...

  9. 学习爬虫的day02 (用线程去爬虫 提高速度)

    通过lxml的方式去分析数据,将爬到的数据放到file中的html中代码如下# 用线程去爬虫 from urllib.request import Request from urllib.reques ...

  10. Numpy入门 - 数组切片操作

    本节主要演示数组的切片操作,数组的切片操作有两种形式:更改原数组的切片操作和不更改原数组的切片操作. 一.更改原数组的切片操作 import numpy as np arr = np.array([1 ...