<!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. iOS 发送位置消息

    发送地理位置在社交应用里面是很常用的需求.最近也需要在自己的应用里面加入这个功能 首先我们需要获取自己的地理位置,这里用到 CLLocationManager 这个类,调用如下代码 locationM ...

  2. Java学习--多态

    1. 多态 多态:同一个对象(实物),在不同时刻体现出来的不同状态 多态的前提: A:要有继承关系 B:要有方法重写 C:要有父类引用指向子类对象 父类 f = new 子类() 多态中的成员访问特点 ...

  3. python模块与包详解

    <1>.模块:任何  *.py 的文件都可以当作模块使用 import 导入 >>>improt test >>>b=test.a() >> ...

  4. Python的编码详解

    一. 编码介绍 计算机只能处理数字(最底层的0和1),如果要处理文本,就必须将文本转换为数字才能处理.最早的计算机在设计时采用8个比特(bit)作为一个字节(byte),所以一个字节能表示的最大整数就 ...

  5. 扩大VirtualBox虚拟机磁盘的方法

    之前在VirtualBox里安装了一个XP系统,当时只分配了10G磁盘空间,随着使用,空间不足了. 在虚拟机管理器里不能直接调整磁盘的大小,这里要用到VirtualBox安装目录下的VBoxManag ...

  6. 2016级算法第二次上机-F.ModricWang's Number Theory II

    891 ModricWang's Number Theory II 思路 使得序列的最大公约数不为1,就是大于等于2,就是找到一个大于等于2的数,它能够整除序列中的所有数. 考虑使得一个数d整除数组中 ...

  7. Educational Codeforces Round 58 (Rated for Div. 2)

    A. Minimum Integer 水 #include<bits/stdc++.h> #define clr(a,b) memset(a,b,sizeof(a)) using name ...

  8. google浏览器安装不上的绝望经历

    手贱把google的一些文件删除了,整个浏览器都没法打开 决定重装下,但是连卸载的功能都无法打开了 于是决定上网重新下载了个安装包,发现安装包都打不来 很绝望,查了很多资料 很多人说要删除注册表的东西 ...

  9. PHP的curl实现get，post 和 cookie （转）

    类似于dreamhost这类主机服务商,是显示fopen的使用 的.使用php的curl可以实现支持FTP.FTPS.HTTP HTPPS SCP SFTP TFTP TELNET DICT FILE ...

  10. Jenkins添加maven插件

    1.1.1 安装Maven插件 我们要使用Jenkins+Maven对Java项目进行构建,需要安装Maven Project Plugin,具体安装过程请参考插件管理部分 1.1.2 3.Linux ...