css sticky footer 布局
方法一：footer 上用负的 margin-top
- 在内容外面需要额外包一层元素(wrap)来让它产生对应的 padding-bottom。是为了防止负 margin 导致 footer 覆盖任何实际内容。
//html结构
<body>
<div id="wrap">
<div id="main">
main<br/>
main<br/>
</div>
</div>
<div id="footer"></div>
</body>
//css样式
html, body {
height: 100%;
margin: 0;
}
#wrap{
width: 100%;
min-height: 100%;
}
/*内容区需要让出一部分区域，防止内容被盖住*/
#main{
padding-bottom: 30px;
}
//wrap包裹内容的最小高度是100%，此时将footer的部分通过margin-top拉上去30px。
#footer{
width: 100%;
height: 30px;
background-color: yellow;
margin-top: -30px;
}
方法二：负margin-bottom
- 用一个元素将除了 footer 之外的其他内容包起来。给它设一个负的 margin-bottom，让它正好等于 footer 的高度。这是一个最基本的方法。
<body>
<div class="wrapper">
content
<div class="push"></div>
</div>
<footer class="footer"></footer>
</body>
//css样式
html, body {
height: 100%;
margin: 0;
}
.wrapper {
min-height: 100%;
margin-bottom: -50px;
}
.footer,
.push {
height: 50px;
}
复制代码
方法三：flex布局
- Web 设计中固定高度通常都不好，内容可能改变，我们需要footer灵活性。固定高度通常要被亮红灯。使用 flexbox 来实现粘连 footer 不仅不需要任何额外的元素，还可以支持 footer 可变高度。
//html结构
<body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>
//css样式
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}
.footer{
height: 50px;
background-color: red;
}
复制代码- 甚至可以添加一个 header 到 .content 前面或者其他更多内容到后面。使用 flexbox 的诀窍是：
- 设置 flex: 1 在你希望自动填充窗口空间的子元素上（在我们的例子里是 .content 元素）。
- 可以设置 margin-top:auto 来让子元素尽可能远离它前面的元素（或者根据需要选择任意一个方向的 margin）。（上面的 flex:1 也可以用 margin-bottom:auto，内容垂直居中可以用margin:auto 0，flex 布局很奇妙吧）
css sticky footer 布局的更多相关文章
- css sticky footer 布局 手机端
什么是css sticky footer 布局? 通常在手机端写页面 会遇到如下情况 页面长度很短不足以撑起一屏,此时希望页脚在页面的底部 而当页面超过一屏时候,页脚会在文章的底部 ,网上有许多办法, ...
- css sticky footer布局
Sticky footers设计是最古老和最常见的效果之一,大多数人都曾经经历过.它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部:如果内容足够长时,页脚块会被内容向下推送.套路为:内容 ...
- 【CSS】Sticky Footer 布局
什么是 Sticky Footer 布局? Sticky Footer 布局是一种将 footer 吸附在底部的CSS布局. footer 可以是任意的元素,该布局会形成一种当内容不足,footer ...
- 【css技能提升】完美的 Sticky Footer 布局
在总结之前所做的项目时,遇到过下面这种情况. 在主体内容不足够多或者未完全加载出来之前,就会导致出现左边的这种情况,原因是因为没有足够的垂直空间使得页脚推到浏览器窗口最底部.但是,我们期望的效果是页脚 ...
- CSS Sticky Footer
----CSS Sticky Footer 当正文内容很少时,底部位于窗口最下面.当改变窗口高度时,不会出现重叠问题. ----另一个解决方法是使用:flexBox布局 http://www.w3c ...
- 两种最常用的Sticky footer布局方式
Sticky footer布局是什么? 我们所见到的大部分网站页面,都会把一个页面分为头部区块.内容区块和页脚区块,当头部区块和内容区块内容较少时,页脚能固定在屏幕的底部,而非随着文档流排布.当页面内 ...
- 前端经典布局：Sticky footer 布局
什么是Sticky footer布局?前端开发中大部分网站,都会把一个页面分为头部区块.内容区块.页脚区块,这也是比较.往往底部都要求能固定在屏幕的底部,而非随着文档流排布.要实现的样式可以概括如下: ...
- CSS Sticky Footer: 完美的CSS绝对底部
CSS的简单在于它易学,CSS的困难在于寻找更好的解决方案.在CSS的世界里,似乎没有完美这种说法.所以,现在介绍的CSS绝对底部,只是目前个人见过的方案中比较完美的吧. 先说我们为什么会使用到这个C ...
- sticky footer布局，定位底部footer
其作用就是当内容区域比较少时,让footer也能正常定位到底部,以前我们使用js来达到这种效果,其实用css也是完全可以的 <!DOCTYPE html> <html lang=&q ...
随机推荐
- linux pwd指令的C实现
linux pwd指令的C实现 pwd指令的功能介绍 linux pwd命令用于显示工作目录 执行pwd命令可立刻得知当前所在工作目录的绝对路径名称. 示例: 查询系统手册 如图所示,getcwd的描 ...
- 20175212童皓桢 《Java程序设计》第11周学习总结
20175212童皓桢 <Java程序设计>第11周学习总结 教材学习内容总结 一.URL类 1.一个URL对象通常包含最基本的三部分信息:协议.地址.资源 2.构造方法: public ...
- P2010 回文日期
P2010 回文日期 题解 回文日期,一共8位,只需要枚举4位就好了其实,然后判断它是否合法 代码 #include<bits/stdc++.h> using namespace std; ...
- CAN-FD协议浅析
引言 随着电子.半导体.通讯等行业的快速发展,汽车电子智能化的诉求也越来越强,消费者希望驾驶动力性.舒适性.经济性以及娱乐性更强的汽车.汽车制造商为了提高产品竞争力,将越来越多的电子控制系统加入到汽车 ...
- sql server 字符串拆分
最近项目调取存储的时候直接传入string 作为in的查询范围,结果报错了,深思之后才发现,数据库对于传进来的String,并不是我们想的直接可以作为参数,而是作为一个整体,而in是需要一个类似arr ...
- Function程序设计及应用
Function也称为函数,它是SAP中一个独物的程序模式,一般是一段单独的程序代码,可独立执行或直接被SAP其他程序所调用.Function支持远程访问模式,即提供接口供SAP程序使用(如VB,.N ...
- IOS CocoaPods详细使用方法
自从有了CocoaPods以后,这些繁杂的工作就不再需要我们亲力亲为了,只需要我们做好少量的配置工作,CocoaPods会为我们做好一切 一.什么是CocoaPods 1.为什么需要CocoaPo ...
- Unity中的动画系统和Timeline(3) 混合树和动画匹配
混合树 前面我们通过在Animation界面添加单独的动作来控制动画,这样做比较麻烦,每个单独的属性,比如站立,奔跑等,都需要单独的代码来控制.现在我们可以通过使用混合树,其基本思想是将相近的动画混合 ...
- LeetCode.914-一副牌中的X(X of a Kind in a Deck of Cards)
这是悦乐书的第352次更新,第377篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第214题(顺位题号是914).在一副牌中,每张牌上都写有一个整数. 当且仅当您可以选择 ...
- 转·带你用实例理解C语言回调函数
原文出处:https://segmentfault.com/a/1190000008293902?utm_source=tag-newest 前言: 如不懂函数指针,请先查阅关于函数指针内容的资料(h ...