<!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. uC/OS-II 函数之信号量相关函数

    上文主要介绍了时间相关的函数,本文介绍信号量相关的函数:OSSemCreate()建立信号量函数,OSSemPend()取得使用权函数,OSSemPost()使用权递加函数 信号量介绍 如果我们想对一 ...

  2. Win10通电自动开机的解决办法

    前几天Win10强推系统升级,更新后无意中发现每次通电电脑就自动开机了. 解决办法: 打开控制面板>电源选项>选择电源按钮的功能,把关机设置里的“启用快速启动(推荐)”选项去掉就可以了. ...

  3. springboot(十)-监控应用

    微服务的特点决定了功能模块的部署是分布式的,大部分功能模块都是运行在不同的机器上,彼此通过服务调用进行交互,前后台的业务流会经过很多个微服务的处理和传递,出现了异常如何快速定位是哪个环节出现了问题? ...

  4. python 继承与组合

    一.组合 #老师 课程 生日 class Course: def __init__(self,name,period,price): self.name = name self.period = pe ...

  5. odoo 二次开发的一些原理

    一:self是什么 目前新版的Odoo中使用到的self,是对  游标cr.用户ID.模型.上下文.记录集.缓存  的封装. 我们可以通过 self.XX 获取到这些封装的东西,比如:self.cr. ...

  6. Linux下Python3.5使用pyqt5.11报错 ImportError: /usr/local/lib/python3.5/dist-packages/PyQt5/QtCore.so: undefined symbol: PySlice_AdjustIndices 解决方法

    我用的Linux自带的是Python3.5版本,运行pip3 install PyQt5, 下载的是PyQt5.11,运行PyQt5程序会报错: ImportError: /usr/local/lib ...

  7. C语言实现数组逆置

    #include <stdio.h> #include <assert.h> void swap(int *a ,int *b) { int tmp = *a; *a = *b ...

  8. python fileinput处理多文件

    import fileinput with fileinput.input(files=(path1,path2)) as f: for line in f: print(line)

  9. 20164324王启元 Exp4恶意代码分析

    一.实验要求 1.系统运行监控 使用如计划任务,每隔一分钟记录自己的电脑有哪些程序在联网,连接的外部IP是哪里.运行一段时间并分析该文件,综述一下分析结果. 安装配置sysinternals里的sys ...

  10. MySQL 查询结果分组 group by

    [group by {col_name | position} [ASC | DESC ]] 分组条件 [HAVING where_condition] HAVING 后面的条件必须出现在select ...