<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

    <style>

        .box { display: flex; min-height: 100vh; flex-direction: column; }

        .box-con { flex: 1; }

        header{

            height:100px;

            background:red;

        }

        footer {

            height:100px;

            background:cyan;

        }

    </style>

</head>

<body class="box">

    <header></header>

    <main class="box-con"></main>

    <footer></footer>

</body>

</html>

flex固定底部栏的更多相关文章

  1. mui初级入门教程（二）— html5+ webview 底部栏用法详解

    文章来源:小青年原创发布时间:2016-05-19关键词:mui,html5+,webview转载需标注本文原始地址: http://zhaomenghuan.github.io/#!/blog/20 ...

  2. fullpage.js 结合固定导航栏—实现定位导航栏

    开始制作自己的个人简历啦,决定要使用固定导航栏,又打算使用fullpage.js做全屏滚动. 仔细看了fullpage文档之后,发现不用额外写js代码就可以实现以下效果: 1.当滚动翻页时,导航栏也自 ...

  3. 固定底部导航菜单-续集（BottomMenu-移动端V3.0）

    固定底部导航菜单-续集(BottomMenu-移动端V3.0) 适应在客户端,点击弹出二级菜单.因为手机不支持hover.所以使用click点击实现弹出菜单,并且一级菜单聚焦变色,变化背景图片 核心c ...

  4. Android软键盘弹出将底部栏顶上去并不会挤压界面

    界面需要,找到了一种不需要去设置android:windowSoftInputMode属性的解决keyboard和layout不适问题 有关设置android:windowSoftInputMode的 ...

  5. 使用display:flex;实现两栏布局和三栏布局

    一.使用display:flex;实现两栏布局 body,div{margin:0px;padding:0px;} .flex-container{display:flex;height:300px; ...

  6. JS---封装getScroll函数 & 案例：固定导航栏

    封装getScroll函数 1. 获取页面向上或者向左卷曲出去的距离的值 2. 浏览器的滚动事件 function getScroll() { return { left: window.pageXO ...

  7. 固定导航栏（jquery）

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  8. Bootstrap 固定底部导航栏菜单

    直接上代码: <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" ...

  9. RN如何固定底部的按钮

    如上图的底部新增按钮,要是放在web里那是相当简单,直接是用固定定位就行,但是在RN里是没有固定定位可言的. 方案一: 采用绝对定位,相对于最外层的定位在底部位置.(在部分安卓机上有问题,动态计算的高 ...

随机推荐

  1. Python3之文本操作

    文件操作示例分析: 文件操作一般要经历三个步骤: 打开文件 操作文件 关闭文件 读取操作示例: >>>f = open('test.txt', 'r') # 打开文件test.txt ...

  2. Python3之redis使用

    简介 redis是一个key-value存储系统,和Memcache类似,它支持存储的value类型相对更多,包括string(字符串),list(列表),set(集合),zset(有序集合),has ...

  3. [NodeJS]Jenkins-cli

    使用npm 包nestor 触发jenkins job, 达到命令行管理Jenkins功能. 1. install nestor : npm install -g nestor 2. set JENK ...

  4. 主流服务器虚拟化技术简单使用——Hyper-V（二）

    当在多台Windows Server上部署了hyper-v的时候,需要采用合适的方法管理这些hyper-v节点. 远程桌面 最简单的方法就是逐台远程桌面登陆Windows Server,再使用每台本地 ...

  5. Android Fragment实现微信底部导航

    1.XML布局 (1)主界面 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout x ...

  6. 求一个n元一次方程的解，Gauss消元

    求一个n元一次方程的解,Gauss消元 const Matrix=require('./Matrix.js') /*Gauss 消元 传入一个矩阵,传出结果 */ function Gauss(mat ...

  7. 转 RMAN: RAC Backup, Restore and Recovery using RMAN

    PURPOSE The purpose of this document is to give a quick guide for using RMAN on RAC databases. We wi ...

  8. J15W-10T-16T黄铜丝口截止阀厂家，J15W-10T-16T黄铜丝口截止阀价格 - 专题栏目 - 无极资讯网

    无极资讯网 首页 最新资讯 最新图集 最新标签   搜索 J15W-10T-16T黄铜丝口截止阀 无极资讯网精心为您挑选了(J15W-10T-16T黄铜丝口截止阀)信息,其中包含了(J15W-10T- ...

  9. Oracle 分区表（转）

    原文地址:http://love-flying-snow.iteye.com/blog/573303 废话少说,直接讲分区语法. Oracle表分区分为四种:范围分区,散列分区,列表分区和复合分区. ...

  10. JDBC（4）-Result结果集

    1.Result结果集的引入 当我们查询数据库时,返回的是一个二维的结果集,我们这时候需要使用ResultSet来遍历结果集,获取每一行的数据. 2.使用Result遍历查询结果 boolean ne ...