利用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. 7. 由一道ctf学习变量覆盖漏洞

    0×00 背景 近期在研究学习变量覆盖漏洞的问题,于是就把之前学习的和近期看到的CTF题目中有关变量覆盖的题目结合下进一步研究. 通常将可以用自定义的参数值替换原有变量值的情况称为变量覆盖漏洞.经常导 ...

  2. mb_strlen(,utf-8);可以除去中文字符，统一返回是几个字符

    mb_strlen(,utf-8);可以除去中文字符,统一返回是几个字符

  3. 微信小程序 功能函数 地图定位相对直线距离

      GetDistance:function(lat1, lng1, lat2, lng2){ // console.log(lat1) var radLat1 = lat1 * Math.PI / ...

  4. XTU 1233 Coins(DP)

    题意: n个硬币摆成一排,问有连续m个正面朝上的硬币的序列种数. 很明显的DP题.定义状态dp[i][1]表示前i个硬币满足条件的序列种数.dp[i][0]表示前i个硬币不满足条件的序列种数. 那么显 ...

  5. BZOJ 1444 有趣的游戏(AC自动机+矩阵快速幂)

    真的是很有趣的游戏... 对每个单词构建好AC自动机后,由于单词都是相同长度的且不同,所以不会出现互相为子串的形式. 那么我们对AC自动机上的节点构建转移矩阵.对于每个单词末尾的节点.该节点的出边仅仅 ...

  6. 秒杀多线程第十四篇 读者写者问题继 读写锁SRWLock （续）

    java 包实现了读写锁的操作: package com.multithread.readwritelock; import java.util.concurrent.CountDownLatch; ...

  7. Testng 运行Cannot find class in classpath

    用Testng运行多个class,结果报: org.testng.TestNGException: Cannot find class in classpath: Salesman     at or ...

  8. 给定一个字符串 s，找到 s 中最长的回文子串。你可以假设 s 的最大长度为1000。

    给定一个字符串 s,找到 s 中最长的回文子串.你可以假设 s 的最大长度为1000. 示例 1: 输入: "babad" 输出: "bab" 注意: &quo ...

  9. DP——P2300 合并神犇

    题目背景 loidc来到了NOI的赛场上,他在那里看到了好多神犇. 题目描述 神犇们现在正排成一排在刷题.每个神犇都有一个能力值p[i].loidc认为坐在附近的金牌爷能力参差不齐非常难受.于是loi ...

  10. 【JavaScript】面向对象的程序设计

    一.前言        接着上一篇的内容,继续JavaScript的学习. 二.内容 属性类型 //数据属性[Configurable] —— 能否通过delete删除属性从而重新定义属性,能否修改属 ...