sticker-footer布局
1、嵌套层级不深,可直接继承自 body width:100%; height:100%;
<body>
<div id="sticker">
<div class="sticker-con">我是内容</div>
</div>
<div class="footer">我是脚</div>
</body>
html,body{
width:100%;
height:100%;
}
#sticker{
width:100%;
min-height:100%;
}
.sticker-con{
padding-bottom:40px; // 40px 为 footer 本身高度
}
.footer{
margin-top:-40px; // 40px 为 footer 本身高度
}
2、嵌套层级很深,无法直接从上级继承 百分比高度的
第一种方法:给需要的 sticker-footer 创建一个 wrapper
<body>
<div id="wrapper">
<div id="sticker">
<div class="sticker-con">我是内容</div>
</div>
<div class="footer">我是脚</div>
</div>
</body>
.wrapper{
position:fixed; // 这样 wrapper 就可以直接从 html,body 继承 百分比高度了
overflow:auto; // 当高度超过 100% ;时产生滚动条
width:100%;
height:100%; // 继承自 body
}
// wrapper 内部包裹的结构,就如上所示了,css样式也一样
3. 当无法用百分比获取高度时,也可通过js方式获得
<body>
<div id="sticker">
<div class="sticker-con">我是内容</div>
</div>
<div class="footer">我是脚</div>
</body>
var sticker = document.querySelector('#sticker');
var h = document.body.clientHeight;
sticker.style.minHeight = h - 44 + 'px';
//css样式同第一种, 只是 sticker 的 min-height 用css获取
//这种方式也可应对一些特殊情况,比如有头部导航栏的情况,可以灵活的处理 min-height:
4. 强大的 flex 布局 flex-direction:column
- 将wrapper容器 display:flex; flex-direction:column
- sticker: flex:1; 占据除footer以外的剩余空间
html,body{
width: 100%;
height: 100%;
background-color: #ccc;
margin:0;
padding: 0;
}
header{
height:44px;
width: 100%;
text-align: center;
line-height: 44px;
}
#wrapper{
display: flex;
flex-direction: column;
width: 100%;
/*height: 100%;*/
}
#sticker{
background-color: red;
flex: 1;
}
#sticker .sticker-con{
padding-bottom: 40px;
}
.footer{
background-color: green;
height: 40px;
}
<header>我是头部</header>
<div id="wrapper">
<div id="sticker">
<div class="sticker-con">我是内容</div>
</div>
<div class="footer">我是脚</div>
</div>
var wrapper = document.querySelector('#wrapper');
var h = document.body.clientHeight;
wrapper.style.minHeight = h - 44 + 'px'; // 减去头部导航栏高度
sticker-footer布局的更多相关文章
- 两种最常用的Sticky footer布局方式
Sticky footer布局是什么? 我们所见到的大部分网站页面,都会把一个页面分为头部区块.内容区块和页脚区块,当头部区块和内容区块内容较少时,页脚能固定在屏幕的底部,而非随着文档流排布.当页面内 ...
- 【CSS】Sticky Footer 布局
什么是 Sticky Footer 布局? Sticky Footer 布局是一种将 footer 吸附在底部的CSS布局. footer 可以是任意的元素,该布局会形成一种当内容不足,footer ...
- 【css技能提升】完美的 Sticky Footer 布局
在总结之前所做的项目时,遇到过下面这种情况. 在主体内容不足够多或者未完全加载出来之前,就会导致出现左边的这种情况,原因是因为没有足够的垂直空间使得页脚推到浏览器窗口最底部.但是,我们期望的效果是页脚 ...
- css sticky footer 布局 手机端
什么是css sticky footer 布局? 通常在手机端写页面 会遇到如下情况 页面长度很短不足以撑起一屏,此时希望页脚在页面的底部 而当页面超过一屏时候,页脚会在文章的底部 ,网上有许多办法, ...
- 前端经典布局:Sticky footer 布局
什么是Sticky footer布局?前端开发中大部分网站,都会把一个页面分为头部区块.内容区块.页脚区块,这也是比较.往往底部都要求能固定在屏幕的底部,而非随着文档流排布.要实现的样式可以概括如下: ...
- 底部粘连(stiky footer)布局
前面的话 在网页设计中,Sticky footers设计是最古老和最常见的效果之一,大多数人都曾经经历过.它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部:如果内容足够长时,页脚块会被内 ...
- css sticky footer 布局
方法一:footer 上用负的 margin-top 在内容外面需要额外包一层元素(wrap)来让它产生对应的 padding-bottom.是为了防止负 margin 导致 footer 覆盖任何实 ...
- sticky footer布局,定位底部footer
其作用就是当内容区域比较少时,让footer也能正常定位到底部,以前我们使用js来达到这种效果,其实用css也是完全可以的 <!DOCTYPE html> <html lang=&q ...
- stick footer布局
需求: 将footer固定到底部.文章内容不足满屏时 footer在底部,超过满屏时footer在内容末尾. 方法一: <div id="wrap"> <div ...
- css经典布局—stick footer布局
html部分 <div id="wrap"> <div id="main" class="clearfix"> &l ...
随机推荐
- 你真的会写单测吗?TDD初体验
前言: 昨天读到了一篇文章,讲的是TDD,即Test-Driven Development,测试驱动开发.大体意思是,它要求在编写某个功能的代码之前先编写测试代码,然后只编写使测试通过的功能代码,通过 ...
- ADO.NET学习心得《一》
大家好,我是代号六零一,很高兴又开始重启博客了,为了更好的加深自己的记忆和复习,今天开始坚持写写心得体会,刚开始学习ADO.NET的时候也是一脸懵逼的,代码只有动手敲打才会知道其实并不难,只要多敲几遍 ...
- 关于find的-perm
关于find的-perm 参考关于find命令-perm 的用法 总结 有三种用法 find -perm -mode find -perm mode find -perm /mode(find -pe ...
- java多线程回顾3:线程安全
1.线程安全问题 关于线程安全问题,有一个经典案例:银行取钱问题. 假设有一个账户,有两个线程从账户里取钱,如果余额大于取钱金额,则取钱成功,反之则失败. 下面来看下线程不安全的程序会出什么问题. 账 ...
- SqlServer2005 查询 第六讲 null
今天们来讲sql命令中的这个null参数 null null: 可以理解成[没有值,空值]的意思 注意以下几点 --1.零和null是不一样的,null表示空值,而零表示的一个确定的值 --2.nul ...
- mongodb基本命令,mongodb集群原理分析
mongodb基本命令,mongodb集群原理分析 集合: 1.集合没有固定数据格式. 2. 数据: 时间类型: Date() 当前时间(js时间) new Date() 格林尼治时间(object) ...
- 领扣(LeetCode)转置矩阵 个人题解
给定一个矩阵 A, 返回 A 的转置矩阵. 矩阵的转置是指将矩阵的主对角线翻转,交换矩阵的行索引与列索引. 示例 1: 输入:[[1,2,3],[4,5,6],[7,8,9]] 输出:[[1,4,7] ...
- websocket可以做什么
本篇介绍的是websocket,但是并不介绍它的协议格式,一般能看明白http头也能明白websocket在协议切换前的协商,能看明白IP报头也就对websocket在协议切换后通讯格式不陌生.web ...
- 在 Vue中使用layui日历控件,标注重要日子
因为在vue文件中通过import加载,不知道为什么打包后会找不到js, 所以通过这种方法引入 在index.html中引入 文件目录 需要放在static目录下 <input type=&qu ...
- PHP 的面向对象 与 类
面向对象 == OO 学习面向对象 == XXOO;[学习使我快乐!] <!--附一个demo类的实例化--> http://note.youdao.com/noteshare?id=38 ...