<!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. 模块time, datetime的用法

    一. time  time库提供了各种操作时间的方法   1. time.asctime([tuple]):将一个时间元组转换成一个可读的24个时间字符串. >>> time.asc ...

  2. bzoj3280: 小R的烦恼（最小费用最大流）

    Description 小R最近遇上了大麻烦,他的程序设计挂科了.于是他只好找程设老师求情.善良的程设老师答应不挂他,但是要 求小R帮助他一起解决一个难题.问题是这样的,程设老师最近要进行一项邪恶的实 ...

  3. Oracle 常用语句备份

    1.oracle 11g 用户名和密码默认区分大小写,可更改alter system set sec_case_sensitive_logon=false 设置改为不区分大小写. 2.授权创建视图:G ...

  4. Comparación para 2019 Nueva Lonsdor K518S y K518ISE

    Comparación para 2019 Nueva Lonsdor K518S y Lonsdor K518ISE: Igual: Capacidades de Immo y cobertura ...

  5. 深刻理解Python中的元类(metaclass)（转）

    转载地址:http://blog.jobbole.com/21351/ 另外有几点理解记录下: 创建一个实例时,有时会传入参数,这些参数会同时传入 __init__() 和 __new__(),如: ...

  6. ocr 资源

    1. PIL 在图片上添加中文 https://blog.csdn.net/m0_37606112/article/details/78511381 2 .Chinese Text in the Wi ...

  7. Jmeter基础元件

    测试计划 1.Test Plan (测试计划) 用来描述一个性能测试,包含与本次性能测试所有相关的功能.也就说JMeter创建性能测试的所有内容是于基于一个计划的. 下面看看一个计划下面都有哪些功能模 ...

  8. mac 下安装 mit-scheme

    这两天心血来潮想看一下 SICP 和 Lisp,准备先看 SICP ,之后再学 Haskell, 深入学习一下函数式编程. 所以得装个 mit-scheme 做练习. 尝试了 3 种方式, 前 2 种 ...

  9. 【wordpress】wordpress环境的搭建

    WordPress WordPress 是一种使用 PHP语言和 MySQL数据库开发的开源.免费的Blog(博客,网志)引擎,用户可以在支持 PHP 和 MySQL 数据库的服务器上建立自己的 Bl ...

  10. 在ubuntu下使用Eclipse搭建Hadoop开发环境

    一.安装准备1.JDK版本:jdk1.7.0(jdk-7-linux-i586.tar.gz)2.hadoop版本:hadoop-1.1.1(hadoop-1.1.1.tar.gz)3.eclipse ...