<!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. 部署LAMP架构及其应用

    部署企业LAMP架构 (一)首先安装Apache服务,具体请见另一篇关于Apache的博文. (二)安装MySQL数据库,具体请见另一篇关于LNMP的博文. (三)构建PHP运行环境 1.安装PHP ...

  2. python2与python3差异，以及如何写两者兼容代码

    1.路径差异: 绝对导入:跳过包内,直接搜索 sys.path ,在sys.path的基础上进行我们的模块搜索. 相对导入:先包内,再包外,再,,, python2是默认相对导入的,因此对于一般性的导 ...

  3. 2016级算法第三次上机-A.Bamboo的小吃街

    A Bamboo的小吃街 分析 经典的两条流水线问题,题目描述基本类似于课件中的流水线调度,符合动态规划最优子结构性质 关键的动态规划式子为: dp[0][j] = min(dp[0][j - 1], ...

  4. IntelliJ IDEA 版本控制(svn、git) 修改文件后，所属目录的颜色也变化

    IntelliJ IDEA 的版本控制默认文件修改了,所属目录的颜色是不会变化,这很不方便.如: 修改方法如下: File --> settings --> version control ...

  5. 对EM算法的理解

    EM算法中要寻找的参数θ,与K-means聚类中的质心是对应的,在高斯混合模型中确定了θ,便可为样本进行类别的划分,属于哪个高斯分布的概率大就是哪一类,而这一点与K-means中的质心一样,质心确定了 ...

  6. Apache 配置代理服务

    1.根据项目需要,Apache服务下面有2个tomcat 分别指向不同的域名 2.修改 Apache-conf-httpd.conf LoadModule proxy_module modules/m ...

  7. 916. Word Subsets

    We are given two arrays A and B of words.  Each word is a string of lowercase letters. Now, say that ...

  8. Vue触发input选取文件点击事件

    CSS .upload-btn-box { margin-bottom: 10px; button { margin-right: 10px; } input[type=file] { display ...

  9. wiz笔记

    分享本地的wiz笔记到网上 , 成为博客 博客园 http://www.cnblogs.com/您的博客名称/services/metablogapi.aspx // region 图片里面的字段:从 ...

  10. 点击劫持（click jacking）

    什么是点击劫持劫持原理劫持案例代码示例优酷频道刷粉的POC腾讯微博刷粉防御 什么是点击劫持 点击劫持,clickjacking,也被称为UI-覆盖攻击.这个词首次出现在2008年,是由互联网安全专家罗 ...