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 ...
随机推荐
- web应用安全框架选型：Spring Security与Apache Shiro
一. SpringSecurity 框架简介 官网:https://projects.spring.io/spring-security/ 源代码: https://github.com/spring ...
- Linux基于webRTC的二次开发(二) 实现远程桌面共享
webRTC中的desktop_capture模块提供了捕获桌面和捕获窗口的相关功能,而实现远程桌面共享功能需要将desktop_capture捕获的画面作为peerconnection的视频源,下面 ...
- 初识web API接口及Restful接口规范
一.web API接口 什么是web API接口?: 明确了请求方式,提供对应后台所需参数,请求url链接可以得到后台的响应数据 url : 返回数据的url https://api.map.baid ...
- C# VII: 统计文本行数
本文基于StackOverflow的以下问题收集整理而成. What is the fastest waty to count newlines in a large .NET string: htt ...
- AngularJS: Error reports on $injector:modulerr
Angular JS最常见的问题是,程序启动失败,error为$injector:modulerr 错误是因为加载对应的Module失败,但很难找到需要修改的Module. 一个简单的小技巧是,不要使 ...
- Python之tkinter.messagebox弹窗
messagebox:tkinter的消息框.对话框 一.messagebox.showinfo(title='提示', message='错误') from tkinter import * fro ...
- IDEA+SpringBoot+Mybatis+maven分布式项目框架的搭建
参考文章:https://blog.csdn.net/qq_34410726/article/details/98214992 一.maven分布式工程的基本架构 demo #父工程模块,主要用来定 ...
- Python 操作Gitlab-API 实现批量的合并分支
1.需求:每次大批量上线完成后,都会进行将hotfix合并到Master,合并到test/uat等等重复操作(上线发布后自动合并master已完成). 2.现实:在完成发布后自动合并master后,可 ...
- 扛把子组2018092609-2 选题 Scrum立会报告+燃尽图 06
此作业的要求参见[https://edu.cnblogs.com/campus/nenu/2019fall/homework/8681] 一.小组情况组长:迟俊文组员:宋晓丽 梁梦瑶 韩昊 刘信鹏队名 ...
- mysql8.0.13安装、使用教程图解
mysql8.0.13安装.使用教程图解 MySQL是最流行的关系型数据库管理系统之一,在 WEB 应用方面,MySQL是最好的 RDBMS (Relational Database Manageme ...