此代码展示的效果阐述：（随着屏幕宽高度的变化而变化）

当页面内容小于屏幕高度时，头尾分别处在屏幕顶部和屏幕底部；

当页面出现滚动条时，头尾分别处于屏幕顶部和内容底部；

<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;       这一步很关键
}
.container{
min-height: 100%;         这一步也很关键
position: relative;
}
.box{
width:100%;
height: 500px;
background: blue;
}
#footer{
position: absolute;
bottom: 0;
width:100%;
height:100px;
background: #64A131;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div id="footer">
footer
</div>
</div>
</body>

头部尾部始终处于两端（适用于pc端和移动端）的更多相关文章

  1. 如何解决PC端和移动端自适应问题？

    做网页时,我们通常需要考虑到不同电脑屏幕尺寸,以及不同手机屏幕大小等问题,解决样式发生改变的情况,那么如何解决呢?现在主要是采用自适应来解决高度,宽度的,以及图片自适应问题,下面就PC端和移动端来总结 ...

  2. JS判断android ios系统 PC端和移动端

    最近公司上线移动端,需要根据不同的系统跳转到不同的产品页面,百度后发现这一段代码很好用,不但可以判断当前是什么系统,还能知道当前浏览器是什么内核,移动端PC端都已测试无问题! var browser ...

  3. js判断PC端与移动端跳转

    在网上看到很多这样类似的代码,但是有的很复杂,或者有的没有判断完全,上次经理去见完客户回来讲,使用苹果浏览打开pc端(pc已经做了识别跳转)会自动跳转到移动端的网页去,后来经测试才发现 documen ...

  4. pc端适配移动端

    pc端和移动端共用一套代码 1. 允许网页宽度自动调整 在网页代码的头部,加入一行viewport元标签 <meta name="viewport" content=&quo ...

  5. 如何直接在 PC 端获取其它端设备的 UserAgent 信息呢？

    如何直接在 PC 端获取其它端设备的 UserAgent 信息呢 [博主]反骨仔 [原文地址]http://www.cnblogs.com/liqingwen/p/5909615.html 序 希望收 ...

  6. 淘宝购物车页面 PC端和移动端实战

    最近花了半个月的时间,做了一个淘宝购物车页面的Demo.当然,为了能够更加深入的学习,不仅仅有PC端的固定宽度的布局,还实现了移动端在Media Query为768px以下(也就是实现了ipad,ip ...

  7. 区分PC端与移动端代码，涵盖C#、JS、JQuery、webconfig

    1)C#区分PC端或移动端 using System.Text.RegularExpressions string u = Request.ServerVariables["HTTP_USE ...

  8. 10天学会phpWeChat——第七天：创建一个自适应PC网站+H5移动端的模块

    本教程基于phpWeChat核心框架1.1.0+版本.下载地址:http://s.phpwechat.com/app_38026ed22fc1a91d92b5d2ef93540f20 通过前面六讲的系 ...

  9. pc端和android端应用程序测试有什么区别？（ps面试题）

    pc端和android端应用程序测试有什么区别?(ps面试题) [VIP7]大连-凭海临风(215687736) 2014/4/10 8:56:171.测试环境不同PC平台一般都是windows an ...

随机推荐

  1. 解决Mac下idea运行速度慢

    刚入手Mac,发现Mac下使用idea进行调试极其慢,然后发现和本地回环地址有关: 只需稍微修改hosts文件即可: sudo vim /etc/hosts,在localhost后面追加你的电脑名.l ...

  2. for循环案例

    for循环案例 今天给大家介绍点for循环的案例 1.大马驮2石粮食,中马驮1石粮食,两头小马驮一石粮食,要用100匹马,驮100石粮食,该如何调配? <!DOCTYPE html> &l ...

  3. Microsoft Office Access数据库或项目包含一个对文件“dao360.dll”版本5.0.的丢失的或损坏的引用。

    今天使用 office 2007 access 打开 2003 的数据库中的表时候,提示这个错误.经过搜索,发现是没有 dao360.dll 的问题. 在 https://cn.dll-files.c ...

  4. java 日期排序。。。。

    Collections.sort(list, new Comparator<Map<Object, Object>>() { public int compare(Map< ...

  5. uva-10391-枚举

    题意:对于输入的字符串,判断是否存在一个单词a=b+c 俩种方法,枚举每一个单词进行拼接,复杂度是n*n 枚举每一个单词,对单词进行substr,判断substr出来的是不在map里面 #includ ...

  6. 36.scrapy框架采集全球玻璃网数据

    1.采集目标地址 https://www.glass.cn/gongying/sellindex.aspx 网站比较简单,没什么大的需要注意的问题.2.通过分析测试 https://www.glass ...

  7. 12纯 CSS 创作一种文字断开的交互特效

    原文地址:https://segmentfault.com/a/1190000014719591 总结:三部分组成,原文透明,左右都与原文重叠(绝对定位),但左右各取相应一部分. HTML代码: &l ...

  8. [Writeup]二维码的一个题

    [Writeup]二维码的一个题 瓜皮感觉难出题眼,恶魔暴力膜法初现 看题 一个二维码,扫出来是where is the flag?(where is my mind?) 先感觉 用binwalk扫一 ...

  9. [转] golang socket

    server.go package main import ( "net" "fmt" "io/ioutil" "time&quo ...

  10. 关闭win10 自动更新 及蓝屏解决办法

    "控制面板-管理工具-服务"(或在"此电脑"鼠标右键,点击"管理"),找到Windows Update项目后,将"启动类型&quo ...