利用flex布局，

<html>

  <body>

    <div class='container'>

      <div class='content'></div>

      <div class='footer'></div>

    </div>

  </body>

</html>
#root {

  height: 100%

}

.container {

  display: -webkit-box;

  -webkit-box-orient: vertical;

  height:100%;

}

.content {

  -webkit-box-flex:;

  overflow: scroll;

}

.footer {

  height:100px;

}

固定bottom，页面其它可滑动实现方案的更多相关文章

  1. 【转载自W3CPLUS】如何将页脚固定在页面底部

    该文章转载自:W3CPLUS 大漠的文章 http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page 以下为全文 作为一个Web的 ...

  2. 页面元素固定在页面底部的纯css代码（兼容IE6）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 将HTML页面页脚固定在页面底部(多种方法实现)

    当一个HTML页面中含有较少的内容时,Web页面的footer部分随着飘上来,处在页面的半腰中间,给视觉效果带来极大的影响,接下来为大家介绍下如何将页脚固定在页面底部,感兴趣的朋友可以了解下 作为一个 ...

  4. 控制div固定在页面的某个位置 ，用js感觉很麻烦 CSS更好一些

    CSS代码:<style type="text/css"> html,body { width:100%; height:100%; margin:0px; paddi ...

  5. 如何将页脚固定在页面底部，4中方法 转载自：W3CPLUS

    原博客地址:http://www.w3cplus.com/css/css-sticky-foot-at-bottom-of-the-page 作为一个Web的前端攻城师,在制作页面效果时肯定有碰到下面 ...

  6. 微信小程序 按钮固定在页面底部遮住页面显示内容问题

    我们分为以下部分来解决这个问题: 第一部分:问题的表现是怎么样的? 第二部分:问题的是如何实现的? 第三部分:如何解决问题? 第一部分:问题的表现是怎么样的? 我设置了页面有0-99共100个数,但是 ...

  7. android 布局 使用 viewPager 时，如何解决 和 子页面 长按滑动 冲突问题

    使用 viewPager 时,如何解决 和 子页面 长按滑动 冲突问题. 我的问题原型: 这个问题,我相信遇到的人会比较少,我是在 一个 viewPager 中,其中 一个 fragment 中实现了 ...

  8. 让footer固定在页面（视口）底部（CSS-Sticky-Footer）

    让footer固定在页面(视口)底部(CSS-Sticky-Footer) 这是一个让网站footer固定在浏览器(页面内容小于浏览器高度时)/页面底部的技巧.由HTML和CSS实现,没有令人讨厌的h ...

  9. css3 的 calc()函数在布局中的使用----头部高度固定，页面正好占满一屏

    最近项目遇到一个布局需求,头部高度固定,页面需要刚好占满一屏幕. 如下示意图: 方法:使用calc .wrap{ position: relative; margin-left: 24px; marg ...

随机推荐

  1. 条形码生成库 BarcodeLib

    官方介绍 在ASP.NET,Windows,Reporting Service,Crystal Reports 和 RDLC Reports应用程序中轻松生成条形码 生成准确的条形码图像,并可以保存为 ...

  2. 【bzoj2329】[HNOI2011]括号修复 Splay

    题目描述 题解 Splay 由于有区间反转操作,因此考虑Splay. 考虑答案:缩完括号序列后剩下的一定是 $a$ 个')'+ $b$ 个'(',容易发现答案等于 $\lceil\frac a2\rc ...

  3. "strcmp()" Anyone? UVA - 11732（trie出现的次数）

    给你n个单词,让他们两两比较,要求他们运用strcmp时,进行比较的次数. 边建树边统计 #include <iostream> #include <cstdio> #incl ...

  4. TCP（Transmission Control Protocol）学习笔记

    一.TCP(Transmission Control Protocol)原理介绍(参考维基百科) TCP连接包括三种状态:连接建立.数据传送和连接终止. TCP用三路握手(three-way hand ...

  5. [HNOI/AHOI2018]排列 贪心

    题面 题解: 把题面的限制换成中文: 如果排在第k位的下标 = 排在第j位的值 ,那么k < j 换一个描述方式: 一个值为x的数要排在第x个数后面. 再换一个描述方式: \(fa[i] = a ...

  6. 基于数组实现Java 自定义Stack栈类及应用

    栈是存放对象的一种特殊容器,在插入与删除对象时,这种结构遵循后进先出( Last-in-first-out,LIFO)的原则.java本身是有自带Stack类包,为了达到学习目的已经更好深入了解sta ...

  7. BZOJ2212 [Poi2011]Tree Rotations 【线段树合并】

    题目链接 BZOJ2212 题解 一棵子树内的顺序不影响其与其它子树合并时的答案,这一点与归并排序的思想非常相似 所以我们只需单独处理每个节点的两棵子树所产生的最少逆序对即可 只有两种情况,要么正序要 ...

  8. hdu5279 YJC plays Minecraft 【分治NTT】

    题目链接 hdu5279 题解 给出若干个完全图,然后完全图之间首尾相连并成环,要求删边使得两点之间路径数不超过\(1\),求方案数 容易想到各个完全图是独立的,每个完全图要删成一个森林,其实就是询问 ...

  9. 框架----Django框架（基础篇）

    一.基本配置 一.创建django程序 终端命令:django-admin startproject sitename IDE创建Django程序时,本质上都是自动执行上述命令 其他常用命令: pyt ...

  10. 简单shell 编程

    简单shell编程  by  dreamboy #!/bin/bash while true do echo clear echo echo " 系统维护菜单 " echo &qu ...