<!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. iBatis --> MyBatis

    从 Clinton Begin 到 Google(从 iBatis 到 MyBatis,从 Apache Software Foundation 到 Google Code),Apache 开源代码项 ...

  2. js 平均分割

    let alllist=res.data; var result = []; for (var i = 0; i < alllist.length; i += 3) { result.push( ...

  3. POJ3321 Apple Tree (JAVA)

    树形数组题,有一定难度. 首先得搞清楚树形数组是什么 - 它是建立在原始数组上的统计数组 - 目的:方便对原始数组进行切片统计,主要用于统计切片的累加和 其实你可以对切片进行扫描,把元素一个一个加起来 ...

  4. bootstrap table 超链接的添加 <a>标签

    后台管理页面采用 bootstrap table 页面样式: 现在需要在操作中添加一个<a>标签,跳转到不同的页面 { title: '操作', align: 'center', form ...

  5. POJ_3268 Silver Cow Party 【最短路】

    一.题面 POJ3268 二.分析 该题的意思就是给定了一个由每个节点代表农场的有向图,选定一个农场X办party,其余农场的都要去,每个农场的cow都走最短路,走的时间最久的cow耗时多少. 了解题 ...

  6. [蓝桥杯][2015年第六届真题]机器人塔（dfs）

    题目描述 X星球的机器人表演拉拉队有两种服装,A和B. 他们这次表演的是搭机器人塔. 类似:      A     B B    A B A   A A B B  B B B A B A B A B ...

  7. oracle--dump块信息操作

    01, 查看表 SQL> select * from tab where TNAME='T'; TNAME TABTYPE ----------------------------------- ...

  8. SQL语句模糊查询年月

    <if test="uploadTime != null" > <![CDATA[ and date_format(w.upload_time, '%Y%m') ...

  9. spring、springmvc和mybatis整合（java config方式）

    之前项目中使用ssm框架大多是基于xml的方式,spring3.0以后就提供java config的模式来构建项目,并且也推荐使用这种方式,自从接触过springboot后,深深感受到这种纯java配 ...

  10. Cookie跳转登录验证码

    对于web应用来说,大部分的系统在用户登录时都要求用户输入验证码,验证码的类型的很多,有字母数字的,有汉字的,甚至还要用户输入一条算术题的答案的, 对于系统来说使用验证码可以有效果的防止采用机器猜测方 ...