利用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. (转)设置Sysctl.conf用以提高Linux的性能(最完整的sysctl.conf优化方案)

    Sysctl是一个允许您改变正在运行中的Linux系统的接口.它包含一些 TCP/IP 堆栈和虚拟内存系统的高级选项, 这可以让有经验的管理员提高引人注目的系统性能.用sysctl可以读取设置超过五百 ...

  2. stm32中使用#pragma pack(非常有用的字节对齐用法说明)

    #pragma pack(4)   //按4字节对齐,但实际上由于结构体中单个成员的最大占用字节数为2字节,因此实际还是按2字节对齐 typedef struct { char buf[3];//bu ...

  3. Git Gerrit Repo User Manual

                      Git Repo Gerrit User Manual Revision History   Revision # Description Date Author ...

  4. Codeforces 601D. Acyclic Organic Compounds(四个愿望一次满足)

    trie合并的裸题...因为最多只有n个点,所以最多合并n次,复杂度$O(N*26)$. #include<iostream> #include<cstring> #inclu ...

  5. 【bzoj4198】【Noi2015】荷马史诗

    4198: [Noi2015]荷马史诗 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 2200  Solved: 1169[Submit][Statu ...

  6. python基础----__setitem__,__getitem,__delitem__

    class Foo: def __init__(self,name): self.name=name def __getitem__(self, item): print(self.__dict__[ ...

  7. struts2 - View页面中获取Action的成员变量

    struts2 - View页面中获取Action的成员变量 2016年03月02日 11:04:44 IT男青年 阅读数:1074   View页面中获取Action的成员变量 按照Struts的设 ...

  8. STL源码分析-deque

    http://note.youdao.com/noteshare?id=66f21dca07c1984f41848700021644fd

  9. 11.UiAutomator 相关JAVA知识

    一.封装方法与模块化用例 1.方法: 在JAVA中,方法就好比日常生活中的一个动作,由动作组合成一系列完整的操作. 方法结构: 方法修饰符 方法返回值类型 方法名 { 方法体 } 比如: public ...

  10. 使用rabbitmq消息队列

    一.前言 在python中本身就是存在队列queue.一个是线程队列queue,另一个是进程multiprocessing中的队列Queue. 线程queue:只用于线程之间的数据交互 进程Queue ...