<!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. excel2010冻结行列

    https://jingyan.baidu.com/article/a24b33cd56f6bd19ff002b7c.html

  2. [BZOJ 4857][Jsoi2016]反质数序列

    传送门 $ \color{green} {solution : } $ 因为 $ 1 $ 的个数我们最多只能选一个,所以剩下的数如果组成素数那么只有一奇一偶,显然是个二分图模型 #include &l ...

  3. JAVA数据结构--二叉查找树

    二叉查找树定义 二叉查找树(英语:Binary Search Tree),也称二叉搜索树.有序二叉树(英语:ordered binary tree),排序二叉树(英语:sorted binary tr ...

  4. 持续集成、持续交付、持续部署、Jkens、git

    一  持续集成.持续交付.持续部署 1. 持续集成 持续集成指的是,频繁地(一天多次)将代码集成到主干.持续集成的目的,就是让产品可以快速迭代,同时还能 保持高质量.它的核心措施是,代码集成到主干之前 ...

  5. JQ 输入框控制输入 - 键盘上事件

    <li style="width: 480px">限购数量  <input type="number" name="limitNum ...

  6. 那些H5用到的技术（1）——素材加载

    编码环境前言什么时候用到素材加载?loading提示,让用户等待图片的加载音频的加载利用神器PreloadJS总结 编码环境 Sublime Text 3 插件包括: Autoprefixer 自动补 ...

  7. Centos 7.0设置/etc/rc.local无效问题解决

    安装centos7以后按照以往习惯修改rc.local添加开机启动命令,但重启后发现无效,再次重启发现依然如故 检查系统rc.local服务运行情况 systemctl | grep "rc ...

  8. RequireJs学习笔记之Define a Module

    简单的键值对定义define({    color: "black",    size: "unisize"}); 如果一个模块没有任何依赖,又需要做用一个函数 ...

  9. 快速部署简单私有云CloudStack（下）

    微信公众号:wsy535068621 继续上边的 会给出具体配置

  10. Java中break、continue及标签等跳转语句的使用[上]

    java 中跳转语句使用break.continue和标签,各自或组合完成相应的功能. 今天做题时遇到关于标签命名规范,顺便将跳转语句语法都看了一遍,很有收获. 在<Java编程思想>一书 ...