需求： 将footer固定到底部。文章内容不足满屏时 footer在底部，超过满屏时footer在内容末尾。

方法一：

<div id="wrap">

	<div id="main" class="clearfix">

		<div id="content">

		</div>

		<div id="side">

		</div>

	</div>

</div>

<div id="footer">

</div>

<style>
*{padding: 0;margin: 0;font-size:20px;}
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;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
</style>

方法二：fixed

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>sticky footer</title>
<style type="text/css">
*{padding: 0;margin: 0;font-size: 48px}
/* 第一步设置盒子为满屏大小 */
.box{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
overflow: auto;
background: green;
}
/* 第二步子盒子设置最小高度且清除浮动 给一个padding-bottom 等于footer 避免内容被footer遮盖*/
.box .main{
width: 100%;
min-height: 100%;

padding-bottom: 100px;
}
.box .main .content{
background: orange;
/*padding-bottom: 100px;*/
}
/* 第三步footer的高度和margin-top要相等 */
.box .footer{
position: relative;
width: 100%;
height: 100px;
background: #f3f3f3;
margin: -100px auto 0 auto;
clear: both;
text-align: center;
line-height: 100px;

}
.clearfix{
display: inline-block;

}
.clearfix::after{
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
clear: both;
}
</style>
</head>
<body>
<div class="box">
<div class="main clearfix">
<div class="content">
<p>这里是内容区域</p>
<p>这里是内容区域</p>
<p>这里是内容区域</p>
<p>这里是内容区域</p>
<p>这里是内容区域</p>
<p>这里是内容区域</p>
<p>这里是内容区域</p>
</div>
</div>
<div class="footer">这是footer区域</div>
</div>
</body>
</html>

 

stick footer布局的更多相关文章

  1. css 中 stick footer 布局实现

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

  2. css经典布局—stick footer布局

    html部分 <div id="wrap"> <div id="main" class="clearfix"> &l ...

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

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

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

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

  5. 【CSS】Sticky Footer 布局

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

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

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

  7. css sticky footer 布局 手机端

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

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

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

  9. 底部粘连(stiky footer)布局

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

随机推荐

  1. angular : direative : autoResize textarea auto resize

    今天为大家推出自己的auto resize 指令功能. 目的:解决textarea在给height的问题. 参考源码:http://monospaced.github.io/angular-elast ...

  2. 用ASP.NET创建网站

    ASP.NET提供三种框架来创建web应用:WebForms,ASP.NET MVC和ASP.NET WebPages.这三种框架都是稳定成熟的,你可以用任何一种方式开发一个很棒的web应用.不管你选 ...

  3. vue + socket.io实现一个简易聊天室

    vue + vuex + elementUi + socket.io实现一个简易的在线聊天室,提高自己在对vue系列在项目中应用的深度.因为学会一个库或者框架容易,但要结合项目使用一个库或框架就不是那 ...

  4. 基于Asp.Net Core Mvc和EntityFramework Core 的实战入门教程系列-1

    来个目录吧: 第一章 第二章 第三章 暂时就这么多.后面路线更新吧 本系列文章为翻译加上我个人的使用心得理解,希望帮助热爱学习的程序员. 珍重声明:本系列文章会跟原文有点出入,去掉了罗里吧嗦的文字. ...

  5. BMP图片格式模型（2）

    因为公司的主要业务是图像识别相关的,因此对图像处理.识别是我学习的重点.虽然写程序也不少年了,但是对于图像处理领域,我还是一个新兵.对很多基础的概念也还是存在盲区,所以想在边学边做的过程中,对一些概念 ...

  6. 用Use Case获取需求的方法是否有什么缺陷，还有什么地方需要改进？

    一.用例解释 用例是一种在开发新系统或者软件改造时捕获潜在需求的技术.每个用例提供了一个或多个场景,该场景揭示了系统是如何同最终用户或其它系统交互的,从而获得一个明确的业务目标.用例要避免技术术语,取 ...

  7. （1）写给Web初学者的教案-----学习Web的知识架构

    1:学习Web的知识架构 前文中我们简单的介绍了一些关于Web的基本知识,这里任老师再次强调一下凡是用浏览器打开的网站我们就称之为Web应用程序(B/S结构).除此之外其它需要下载安装的软件或是手机  ...

  8. C 风格字符串相加

    <<C++ Primer>> 第四版Exercise Section 4.3.1 的4.3.0 有如下题目:编写程序连接两个C风格字符串字面值,把结果存储在C风格字符串中.代码 ...

  9. BeagleBone Black安装小米随身WiFi驱动方法

    以下操作直接在beaglebone black上执行 下载驱动源码 git clone https://github.com/rcn-ee/mt7601u.git 下载linux-headers,这是 ...

  10. vue.js 踩坑第一步 利用vue-cli vue-router搭建一个带有底部导航栏移动前端项目

    vue.js学习 踩坑第一步 1.首先安装vue-cli脚手架 不多赘述,主要参考WiseWrong 的 Vue 爬坑之路(一)-- 使用 vue-cli 搭建项目 2.项目呈现效果 项目呈现网址:w ...