前端经典布局:Sticky footer 布局-----flex布局方式

2019-11-02 admin

html代码: <body>

<div class="content"></div>
<div class="footer"></div>

</body>

body {

display: flex; 
flex-flow: column; 
min-height: 100vh;

} .content {

flex: 1; 

} .footer{

flex: 0;      

} 这种方法就是利用flex布局对视窗高度进行分割。footer的flex设为0,这样footer获得其固有的高度;content的flex设为1,这样它会充满除去footer的其他部分。

参考文章:https://segmentfault.com/a/1190000015123189

[转载]原文链接:https://segmentfault.com/a/1190000020886167

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-78774.html

文章标题:前端经典布局:Sticky footer 布局-----flex布局方式

相关文章
前端工程师应该具备的三种思维
如果你是一个天才等级的工程师(马上可以离开),可以独立完成一个很多事情,你可以是一个怪咖,因为我相信没有一个人不会不佩服你。但现实归现实,多数人都不是天才,而我们在职场上也不是单打独斗,我们需要团队合作,需要协调和配合,需要考虑除了代码以外...
2016-01-13
前端开发领域推荐关注的微信公众号
这篇文章分享了前端领域的多个值得关注的技术、设计、极客、创业相关微信公众号。其中有最受欢迎的热门公众号、也有专注某个技术或设计的公众号,涵盖:算法、JavaScript、Nodejs、程序员、Web前端、Linux、数据库、创业、UI设计和...
2017-03-23
javascript记住用户名和登录密码(两种方式)
下面主要通过代码给大家展示下javascript记住用户名和登录密码,具体代码内容请看下文。 第一种方式: CONTENT login.html welcome.html cookie.js common.js login.html &lt...
2017-03-29
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
本文实例讲述了JS常见创建类的方法。分享给大家供大家参考,具体如下: Javascript是一种基于对象的语言,你遇到的所有东西几乎都是对象。但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有Class。(不过,ES6引...
2017-04-05
前端单页应用微服务化解决方案2 - Single-SPA
技术选型 经过各种技术调研我们最终选择的方案是基于 Single-SPA 来实现我们的前端微服务化. Single-SPA 一个用于前端微服务化的JavaScript前端解决方案 使用Single-SPA之后,你可以这样做: (兼容各...
2018-09-07
H5页面实现下载文件(apk、txt等)的三种方式
需求描述 接到的原始需求是这样的,有一个H5页面,页面中有个“点击下载”的按钮,点击之后,完成下载特定的apk。 大概是下面这样的👇: 需求分析 接到需求的时候我偷乐了一下,这个H5页面最大的优点是不在微信中使用(微信好坑,各种限制,基...
2018-07-18
五个值得尝试的前端开发工具
在过去的几年时间里,出现了许多全新的网页应用程序,不过,由于应用程序的功能越来越丰富,也导致了前端开发的复杂度大幅增加。 现在也有不少前端开发工具,比如Backbone和EmberJS框架都能提供稳定的App开发解决方案。同时,Javasc...
2015-12-23
使用vue-grid-layout完成桌面拖拽布局功能
最近在用写公司项目里的一个桌面布局功能 需要使用到vue-grid-layout 看了下网上的 基本上只有demo的使用,这个插件虽然挺不错但是缺陷也很大. 没有下边界,发生碰撞的时候块会无限的往下移动,开放的API个人感觉没什么用 htt...
2018-06-16
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
大家在做些页面的时候,很多都是用ajax实现的,在显示的时候有很多表单提交的add或者update操作,显然这样很烦,突然想到了一个比较好的方法,下面给大家分享下如何用js 实现依赖注入的思想,后端框架思想搬到前端来。 应用场景: 前后端一...
2017-03-29
使用纯javascript实现经典扫雷游戏
很久以前写的 当时都没写注释的 刚加上了 (尼玛,好多自己都不认识了 … ) 不足的地方就是本来想写个游戏排名的统计的,等有空了再加上(好像每次都这么说 然后就等好久好久…) 还有就是没有实现:点击第一个格子不能是雷的功能 &lt;styl...
2017-03-22
回到顶部