html部分

<div class="container">

<div class="body"></div>

<div class="footer"></div>

</div>

footer始终在其底部固定

.container{position:relative;width:100%;min-height:100%;}
.body{padding-bottom:50px;}

.footer{height:50px;position:fixed;bottom:0px;left:0px;right:0px;}

Html——footer的使用的更多相关文章

  1. 一个将 footer 保持在底部的最好方法

    原文: Quick Tip: The Best Way To Make Sticky Footers 当你在布局网页时,有可能会遇到类似下面的这种情况 导致这一问题的原因是页面内容太少,无法将内容区域 ...

  2. 解决Jquery mobile点击较长文本body的时候Header和footer会渐入渐出的问题

         在做一个Phonegap+Jqm工程的时候,出现了如题的问题,相信很多人都遇到过Jquerymobile点击body时候header和footer会闪烁的显示和隐藏问题,fixed却并不能真 ...

  3. CSS Sticky Footer

    ----CSS Sticky Footer 当正文内容很少时,底部位于窗口最下面.当改变窗口高度时,不会出现重叠问题. ----另一个解决方法是使用:flexBox布局  http://www.w3c ...

  4. 利用gulp解决前后端分离的header/footer引入问题

    在我们进行前后端完全分离的时候,有一个问题一直是挺头疼的,那就是公共header和footer的引入.在传统利用后端渲染的情况下,我们可以把header.footer写成两个单独的模板,然后用后端语言 ...

  5. 【技巧篇】解决悬浮的<header>、<footer>遮挡内容的处理技巧

    引言   在现在的前端页面中,尤其是移动端,经常会需要将<header>或者是<footer>模块悬浮出来,跟随页面的滑动保持定位在页面的最上方或者是最下方,如下图所示. “回 ...

  6. footer置底

    html代码: <div class="container"> <div cass="header"></div> < ...

  7. jquery mobile开发中footer一直在底部的设置方法

    现给出html中Body节点中的代码如下: 实现代码:data-position=”fixed” <div data-role="page" id="pageone ...

  8. ListView中动态显示和隐藏Header&Footer

    ListView的模板写法 ListView模板写法的完整代码: android代码优化----ListView中自定义adapter的封装(ListView的模板写法) 以后每写一个ListView ...

  9. 2015.4.19 为什么footer下a的索引值那么大

    1.问题demo:为什么footer下a的索引值那么大,index不是查找兄弟级别的元素么?而且还限定了范围在footer下的a的情况下. 解决方法:alert( $("#footer a& ...

  10. 解决jquery mobile的header和footer在点击屏幕的时候消失的办法

    给header和footer添加 data-position="fixed" 和 data-tap-toggle="false"即可,代码如下: <div ...

随机推荐

  1. AngularJS的学习网站及相关资源整理

    学习angularjs的网站及相关资源的整理,会不断更新. angularJs的官网:https://angularjs.org/       API文档:https://docs.angularjs ...

  2. 实现scp自动输入密码（判断yesno选项）

    1.apt-get install expect 2.编写shell脚本test.sh #!/usr/bin/expect -f#!/bin/shset password 1spawn scp roo ...

  3. js中的callback（阻塞同步或异步时使用）

    1.回调就是一个函数的调用过程,函数a有一个参数,这个参数是个函数b,当函数a执行完以后执行函数b, 那么这个过程就叫回调 eg. function a(callback){ alert('paren ...

  4. WCF学习笔记(基于REST规则方式)

    一.WCF的定义 WCF是.NET 3.0后开始引入的新技术,意为基于windows平台的通讯服务. 首先在学习WCF之前,我们也知道他其实是加强版的一个面向服务(SOA)的框架技术. 如果熟悉Web ...

  5. Windows 下Python操作MySQL

    1.环境要求(Win7 X64): python 2.7, MySQL-python-1.2.3.win-amd64-py2.7 :http://www.codegood.com/download/1 ...

  6. 从Windows远程Ubuntu

    关键字:Windows,Ubuntu,Putty,WinSCP OS:Windows 7,Ubuntu. 1.下载Putty:http://www.putty.org/. 2.双击运行putty.ex ...

  7. ASP.NET 学习小记 -- “迷你”MVC实现(1)

    ASP.NET 由于采用了管道式设计,具有很好的扩展性.整个ASP.NET MVC应用框架就是通过扩展ASP.NET实现的.通过ASP.NET的管道设计,我们知道,ASP.NET的扩展点主要是体现在H ...

  8. C语言小结之结构类型

    C语言小结之结构类型 @刁钻的游戏 (1)枚举型类型enum COLOR {BLACK,RED,BLUE};//声明一种新的数据类型,其值分别为0,1,2但是用BLACK/RED/BLUE代表也可以这 ...

  9. shell写的计算器

    #!/bin/bashif [ $# -ne 3 ] then echo "Usage: $0 num1 + num2" fi case $2 in +) echo $1$2$3= ...

  10. WPF从入门到放弃系列第一章 初识WPF

    什么是WPF WPF(Windows Presentation Foundation)是微软推出的基于Windows Vista的用户界面框架,属于.NET Framework 3.0的一部分.它提供 ...