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 ...
随机推荐
- 5种常见Bean映射工具的性能比对
本文由 JavaGuide 翻译自 https://www.baeldung.com/java-performance-mapping-frameworks .转载请注明原文地址以及翻译作者. 1. ...
- 平滑启动shell脚本
# 平滑关闭和启动 Spring Boot 程序#设置端口SERVER_PORT="8090"#当前时间time=`date +%Y-%m-%d`#设置应用名称JAR_NAME=& ...
- 深入理解计算机系统 第二章 信息的表示和处理 part2
上一周遗留问题的解决 问题:原码.反码.补码是只针对有符号数吗?无符号数有没有这三种编码方式? 得到的答案:对于无符号数,原码.反码和补码是一致的 进一步,由于有符号数是以补码的形式存储在计算机中 ...
- C++中对封装的语法支持——静态成员
静态成员(变量与函数) 1.静态成员变量的语法.访问.特点(共享.类内声明类外初始化) 静态成员变量在class中只做声明,并没有初始化所以不会分配内存. (1) 非静态成员变量必须通过对象来访问. ...
- 多线程编程（3）——synchronized原理以及使用
一.对象头 通常在java中一个对象主要包含三部分: 对象头 主要包含GC的状态..类型.类的模板信息(地址).synchronization状态等,在后面介绍. 实例数据:程序代码中定义的各种类型的 ...
- expect 自动填充密码
它的脚本以#!/usr/bin/expect开头,执行时用expoct,而不是bash.我的一个给samba自动创建用户并且自动填写默认密码的脚本如下: vim smb_passwd.exp #!/u ...
- SpringBoot让你的Bean动起来(自定义参数解析HandlerMethodArgumentResolver)
SpringBoot让你的Bean动起来(自定义参数解析HandlerMethodArgumentResolver) 简介 我们 Controller 用到的一些 Bean 需要通过一定的方式去获取的 ...
- H5之外部浏览器唤起微信分享
最近在做一个手机站,要求点击分享可以直接打开微信分享出去.而不是jiathis,share分享这种的点击出来二维码.在网上看了很多,都说APP能唤起微信,手机网页实现不了.也找了很多都不能直接唤起微信 ...
- 面试官：关于Java性能优化，你有什么技巧
通过使用一些辅助性工具来找到程序中的瓶颈,然后就可以对瓶颈部分的代码进行优化. 一般有两种方案:即优化代码或更改设计方法.我们一般会选择后者,因为不去调用以下代码要比调用一些优化的代码更能提高程序的性 ...
- 2019-9-25：渗透测试，基础学习，medusa爆破学习
Medusa(美杜莎)暴力破解使用 该文章仅供学习,利用方法来自网络文章,仅供参考 一.简介 medusa(美杜莎)是一个速度快,支持大规模并行,模块化,爆破登陆,可以同时对多个主机,用户或是密码执行 ...