<!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. <b>与<strong> <em>与<i>标签的区别

    <b>与 <strong>用在网页上都能使字体加粗,二者的不同是:<b>是物理元素 ;<strong>是逻辑元素. 物理元素强调的是一种物理行为.比如说 ...

  2. 【智能算法】粒子群算法（Particle Swarm Optimization）超详细解析+入门代码实例讲解

    喜欢的话可以扫码关注我们的公众号哦,更多精彩尽在微信公众号[程序猿声] 01 算法起源 粒子群优化算法(PSO)是一种进化计算技术(evolutionary computation),1995 年由E ...

  3. css 命名规划

    命名规范 前言中略微描述了 CSS 怎么使用:下面介绍一下 CSS 的一些代码规范: CSS 命名一般采用小写英文单词或组合命名,单词与单词间以"-"分割:英文单词不缩写,除非一看 ...

  4. 洛谷 P4248 / loj 2377 [AHOI2013] 差异 题解【后缀自动机】【树形DP】

    可能是一个 SAM 常用技巧?感觉 SAM 的基础题好多啊.. 题目描述 给定一个长度为 \(n\) 的字符串 \(S\) ,令 \(T_i\) 表示它从第 \(i\) 个字符开始的后缀,求: \[ ...

  5. Effective C++ 改善５５个方法

    美·Scott Meyers 候捷 电子工业 2011 刚才看到个会议时间有点晚,3.25论文都提交了 谷歌去广告的插件, 最后投了这个会议,刚刚好正合适.我说金钱与时间 ACCUSTOMING YO ...

  6. Storm个人学习总结

    https://www.jianshu.com/p/c7fba7d6a24d https://www.cnblogs.com/peak-c/p/6297794.html https://blog.cs ...

  7. 补充ABP Zero集成微信小程序登陆的BUG修复部分

    感谢园友 @turingguo 发布的 https://www.cnblogs.com/turingguo/p/9019026.html  文章,详细介绍了ABP Zero集成微信小程序登陆的实现过程 ...

  8. Python 实现flatten功能

    from collections import Iterable def flatten(items): for x in items: if isinstance(x, Iterable) and ...

  9. ionic3打包打包安卓apk详细过程以及遇到的问题

    1.jdk和sdk的安装以及环境变量配置参考打包详解 上述连接已经从下载安装jdk以及sdk的环境变量配置到打包的流程以及很详细了.但是在我自己安装打包的过程中遇到了这篇文章中没有遇到的问题,下面图文 ...

  10. Java框架-mybatis03使用注解实现mybatis

    1.面向接口编程: 好处:扩展性好,分层开发中,上层不用管具体的实现,都遵循共同的标准,使得开发变得容易.规范性更好 2.注解的实现 a)编写Dao接口 public interface UserDa ...