原文：http://www.jb51.net/article/21831.htm

当我们让div居中时候，一般有两种方法，一种是固定左右宽度，也就是使用像素绝对定位；另一种是用百分比来相对定位，在这种两种方式下，绝对定位是不能让div随着屏幕而自适应的，而用百分比就可以，但是，是用百分比就会有一个新的问题，如果我们的页面中有这么一句 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
的时候，top的百分比将会失效，而删除这句话的时候，一切正常，都是不知道这句标准的声明为什么会带来如此的不便 
针对这个问题，我使用的下面的方法来实现div的自适应 
首先 我用的是绝对定位的方式，先设置好div的左右上下边距。在body中添加两个事件， 
<body bgcolor="#666666" onresize="test()" onload="getwah()"> 
getwah()用来获取屏幕的大小和div的各个边距，并计算出它们的差

代码如下:
var height,width,width_cha1,width_cha2; 
function getwah() 
{ 
if(document.documentElement && document.documentElement.clientWidth) 
{d_width = document.documentElement.clientWidth;} 
else if(document.body) 
{d_width = document.body.clientWidth;} 
width=parseInt(d_width); 
width_cha1=width-parseInt(document.getElementById("backi").style.left) 
width_cha2=width-parseInt(document.getElementById("massage_box").style.left) 
} 

当屏幕大小变化的时候(onresize)触发test()函数，该函数就是用户根据之前获得屏幕与边距的差值重新设置div的边距，这样就可以实现党屏幕的大小改变后，div的边距也会相应地改变，从而实现div可以随着屏幕大小的改变而自适应

代码如下:
function test() 
{ 
if(document.documentElement && document.documentElement.clientWidth) 
{d_width = document.documentElement.clientWidth;} 
else if(document.body) 
{d_width = document.body.clientWidth;} 
var now_left1=parseInt(d_width )-width_cha1; 
var now_left2=parseInt(d_width )-width_cha2; 
document.getElementById("backi").style.left=now_left1 
document.getElementById("massage_box").style.left=now_left2 
}

利用onresize使得div可以随着屏幕大小而自适应的代码的更多相关文章

  1. div宽度随屏幕大小变化

    题目: 一个页面上两个div左右铺满整个浏览器, 要保证左边的div一直为100px,右边的div跟随浏览器大小变化, 比如浏览器为500,右边div为400,浏览器为900,右边div为800. 方 ...

  2. 不同css样式适应不同屏幕大小实现自适应宽度

    @media screen and (判断属性){ CSS样式选择器 } 例如: <div class="silder_photo"></div> < ...

  3. ALT+TAB切换时小图标的添加 界面透明 屏幕大小 竖行字体 进程信息

    一,ALT+TAB切换时小图标的添加 Dlg类中添加变量 protected: HICON m_hIcon; #define IDR_MAINFRAME 128 ICON IDR_MAINFRAME, ...

  4. android系统如何自适应屏幕大小

    1.屏幕相关概念 1.1分辨率 是指屏幕上有横竖各有多少个像素 1.2屏幕尺寸 指的是手机实际的物理尺寸,比如常用的2.8英寸,3.2英寸,3.5英寸,3.7英寸 android将屏幕大小分为四个级别 ...

  5. echarts生成的图表大小怎么随屏幕的大小改变自适应

    最近在做图表,记录一下用到的知识点,当做自己的日记吧,会不断添加新内容 1,echarts生成的图表大小怎么随屏幕的大小改变自适应? this.chart.setOption(this.options ...

  6. html 网页背景图片根据屏幕大小CSS自动缩放

    https://blog.csdn.net/coslay/article/details/47109281 腾讯微博和QQ空间的登录背景图片是根据访客的屏幕大小自动缩放的,但是好像是用JQuery代码 ...

  7. JaveWeb 公司项目（2）----- 类模态窗口显示DIV并将DIV放置在屏幕正中间

    上一篇博客写的是通过隐藏显示进行div的替换,接下来需要在原有的div前添加一个div,进行表单的提交,需要将div放置在正中间,然后类似C#中的模态窗口,在进行完新弹出的div操作之后,才可以进行下 ...

  8. Android系统自适应屏幕大小

    1.屏幕相关概念1.1分辨率是指屏幕上有横竖各有多少个像素1.2屏幕尺寸指的是手机实际的物理尺寸,比如常用的2.8英寸,3.2英寸,3.5英寸,3.7英寸android将屏幕大小分为四个级别(smal ...

  9. js 根据屏幕大小调用不同的css文件

    原因:屏幕大小不一样,网站看起来总觉得怪怪的,所以,针对不同大小的屏幕,写了不同的css,写完了,要解决的问题就是:怎么根据屏幕的大小来引用不同的CSS,下面就是解决方法了. 解决方法:首先,在hea ...

随机推荐

  1. configure: error : no acceptable C compiler found in $PATH

    先要用yum install yum-fastestmirror更新下源 # yum -y install gcc

  2. 设计模式中类的关系之实现(Realization)

    实现关系是用来描述接口和实现接口的类或者构建结构之间的关系,接口是操作的集合,而这些操作就用于规定类或者构建结构的一种服务. 在接口和类之间的实现关系中,类实现了接口,类中的操作实现了接口中所声明的操 ...

  3. Linux gcc编译器

    GNU CC(通常称为GCC)是GNU项目的编译器,他能够编译C.C++语言编写的程序. 使用gcc,程序员可以对编译过程有更多控制,编译过程分为3个阶段. --预处理 --汇编 --链接 程序员可以 ...

  4. IIS下PHP的ISAPI和FastCGI比较

    在Windows IIS 6.0下配置PHP,通常有CGI.ISAPI和FastCGI三种配置方式,这三种模式都可以在IIS 6.0下成功运行,下面我就讲一下这三种方式配置的区别和性能上的差异. 1. ...

  5. 第一百六十六节，jQuery，基础 DOM 和 CSS 操作，元素内容，元素属性，css和class，元素宽度高度、偏移、滚动条

    jQuery,基础 DOM 和 CSS 操作,元素内容,元素属性,css和class,元素宽度高度.偏移.滚动条 学习要点: 1.DOM 简介 2.设置元素及内容 3.元素属性操作 4.元素样式操作 ...

  6. Servlet 编写过滤器

    Servlet 过滤器可以动态地拦截请求和响应,以变换或使用包含在请求或响应中的信息. 可以将一个或多个 Servlet 过滤器附加到一个 Servlet 或一组 Servlet.Servlet 过滤 ...

  7. .net 连接Redis

    Redis安装 公司业务需要,弄了个类似于消息队列的东西,由客户端一直轮询取得信息.之前一直是走表的,但是效率以对表的使用都太过频繁,想试着用一下Redis,看看效率怎么样. 首先是安装Redis,这 ...

  8. Oracle 11R2 linux上新建实例

    Step1. root用户远程登陆到linux主机上.执行下面的命令切换到oracle用户,使对应的环境变量配置文件生效. # su oracle# source ~/.bash_profile St ...

  9. sqoop-1.4.4安装配置

    环境:redhat6.5 hadoop2.4.1 感谢: http://wenku.baidu.com/view/a9083da8dd3383c4bb4cd274.html注释hbase检查 感谢: ...

  10. GoogleMap-------解决不能使用问题

    前言:由于中国大部分Android手机中的Google服务都被阉割掉了,所以导致GoogleMap无法使用,可以用一下方法解决. 1.不能使用GoogleMap 2.若手机上装有安装市场之类的软件可搜 ...