stick footers布局

需求：将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>

方法二：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>

转载于:https://www.cnblogs.com/pangbo1213/p/8506870.html

stick footers布局相关推荐

4header组件开发
组件中的data必须是一个函数.因为组件是可以服用的,如果组件中的data定义为对象的话,那么修改某一个组件的data会影响另外的组件. 前后端的交互需要通过ajax请求,通过vue-resource ...
项目vue2.0仿外卖APP（五）
header组件 vue-resourse应用 https://github.com/pagekit/vue-resource vue-resource是Vue.js的一款插件,它可以通过XMLHtt ...
如何将页脚固定在页面底部，而不是屏幕底部！
一个经典的 Sticky footers 布局问题话不多说贴代码 <div class="main"><div class="main-box&quo ...
【饿了么】—— Vue2.0高仿饿了么核心模块移动端Web App项目爬坑（一）
[饿了么]-- Vue2.0高仿饿了么核心模块&移动端Web App项目爬坑(一) 前言:学习Vue.js高仿饿了么课程过程中,总结了这个Web App项目从准备到开发完毕自己觉得很重要的知识 ...
Vue2.0高仿饿了么核心模块移动端Web App项目爬坑（一）
原文https://www.cnblogs.com/ljq66/p/9980372.html 前言:学习Vue.js高仿饿了么课程过程中,总结了这个Web App项目从准备到开发完毕自己觉得很重要的知 ...
html+css基础
1.常见浏览器常见的五大浏览器有 ie 火狐谷歌 safari 和opera等 ie:是Trident内核. Firefox(火狐):Gecko内核,代码完全公开,开发程度高. safari:We ...
【笔记-vue】《imooc-vue.js高仿饿了么》、《imooc-vue 音乐app》、《imooc-vue.js源码全方位解析》
20170709 - 20171128:<imooc-vue.js高仿饿了么> 一.第一章课程简介 1-1课程简介 1.需求分析-脚手架工具-数据mock-架构设计-代码编写-自测-编译 ...
06、Vue-Header组件(商家信息)《饿了吗》
一.数据获取 Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource.目前主流的 Vue 项目,都选择 ...
vue高仿饿了么项目学习笔记之二:头部header组件的实现
1. Vue-resource应用在父组件APP.vue的钩子函数created使用vue-resource来ajax请求/api/seller,将数据赋值给vue实例的seller对象,并传值给子 ...

stick footers布局

stick footers布局相关推荐

最新文章

热门文章