头部尾部始终处于两端（适用于pc端和移动端）
此代码展示的效果阐述：（随着屏幕宽高度的变化而变化）
当页面内容小于屏幕高度时，头尾分别处在屏幕顶部和屏幕底部；
当页面出现滚动条时，头尾分别处于屏幕顶部和内容底部；
<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端和移动端）的更多相关文章
- 如何解决PC端和移动端自适应问题？
做网页时,我们通常需要考虑到不同电脑屏幕尺寸,以及不同手机屏幕大小等问题,解决样式发生改变的情况,那么如何解决呢?现在主要是采用自适应来解决高度,宽度的,以及图片自适应问题,下面就PC端和移动端来总结 ...
- JS判断android ios系统 PC端和移动端
最近公司上线移动端,需要根据不同的系统跳转到不同的产品页面,百度后发现这一段代码很好用,不但可以判断当前是什么系统,还能知道当前浏览器是什么内核,移动端PC端都已测试无问题! var browser ...
- js判断PC端与移动端跳转
在网上看到很多这样类似的代码,但是有的很复杂,或者有的没有判断完全,上次经理去见完客户回来讲,使用苹果浏览打开pc端(pc已经做了识别跳转)会自动跳转到移动端的网页去,后来经测试才发现 documen ...
- pc端适配移动端
pc端和移动端共用一套代码 1. 允许网页宽度自动调整 在网页代码的头部,加入一行viewport元标签 <meta name="viewport" content=&quo ...
- 如何直接在 PC 端获取其它端设备的 UserAgent 信息呢？
如何直接在 PC 端获取其它端设备的 UserAgent 信息呢 [博主]反骨仔 [原文地址]http://www.cnblogs.com/liqingwen/p/5909615.html 序 希望收 ...
- 淘宝购物车页面 PC端和移动端实战
最近花了半个月的时间,做了一个淘宝购物车页面的Demo.当然,为了能够更加深入的学习,不仅仅有PC端的固定宽度的布局,还实现了移动端在Media Query为768px以下(也就是实现了ipad,ip ...
- 区分PC端与移动端代码，涵盖C#、JS、JQuery、webconfig
1)C#区分PC端或移动端 using System.Text.RegularExpressions string u = Request.ServerVariables["HTTP_USE ...
- 10天学会phpWeChat——第七天：创建一个自适应PC网站+H5移动端的模块
本教程基于phpWeChat核心框架1.1.0+版本.下载地址:http://s.phpwechat.com/app_38026ed22fc1a91d92b5d2ef93540f20 通过前面六讲的系 ...
- pc端和android端应用程序测试有什么区别？（ps面试题）
pc端和android端应用程序测试有什么区别?(ps面试题) [VIP7]大连-凭海临风(215687736) 2014/4/10 8:56:171.测试环境不同PC平台一般都是windows an ...
随机推荐
- c# 线程 WPF 进度百分比（菜鸟）
#region 线程执行 /// <summary> /// 线程运行,将改变的textblock值实时显示在前台 /// </summary> /// <param n ...
- angularjs，Jsonp跨域访问页面
angularjs1.6.8版本跨域 <!DOCTYPE html> <html ng-app="test"> <head> <meta ...
- 20165205 预习作业三 Linux安装及学习
Linux安装及学习 安装Ubuntu 1)安装版本 在安装VirtualBox时选择了VirtualBox 5.2.6 platform package 安装Ubuntu时选择了Ubuntu 16. ...
- [UGUI]图文混排(三)：资源管理
1.图文混排中的资源,主要是图片. 2.所谓的资源管理,可以分为资源对象池和资源加载这两部分.这里是为图文混排单独做一套资源管理,当然也可以改为调用项目中的资源管理. RichTextResource ...
- MySQL把文件导入表中
1. Mysql 把本地文件导入表中 drop table if exists wufangzhai_caigou_group; create table wufangzhai_caigou_grou ...
- Vue 修改dist 目录.
前后端分析之后,前端 打包处理 2
- fb发布打包外部资源
将资源放在src文件夹下面即可 然后在打包那就会看到资源,勾上即可
- Oracle部署安装
1.用户有数据库服务器则不需要安装Oracle服务器端,若没有需要安装 https://jingyan.baidu.com/article/363872eccfb9266e4aa16f5d.html ...
- js 滑动门的实现
原理:滑动门,这里以图片进行实例,首先设定主盒子div的宽度和高度设定,并进行图片初始化位置的设定,然后将图片绑定事件,并设定要达到的效果 html代码: <!DOCTYPE html> ...
- 跨域（五）——postMessage
HTML5的postMessage机制是客户端最直接的中档传输方法,一般用在iframe中父页与子页之间的客户端跨域通信. 浏览器支持情况:Chrome 2.0+.Internet Explorer ...