随着browser的放大或者变小而随之改变的div -

jerrychenjj

浏览: 26793 次
性别:
来自: 广州

最近访客更多访客>>

javaskyle

技术xx

zt5251000

mapc我

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

随着browser的放大或者变小而随之改变的div

博客分类：

html-css-javascript

HP Opera JavaScript CSS HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head>
<title>fluid Layers Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
p {  font-family: Arial, Helvetica, sans-serif; margin-top: 4px; margin-bottom: 4px; margin-left: 6px; margin-right: 6px}
body {  background-color: #FFFFFF}
-->
</style>
<script type="text/javascript">
<!--
function MM_reloadPage(init) {
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) history.go(0);
}
MM_reloadPage(true);

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

// layer name, left, top, width, height (these are numbers or the word 'auto')
// then, left margin, right margin, top margin, bottom margin
function fluidLayers(el,lp,tp,wp,hp,lm,rm,tm,bm) {
 var x,g,d,sw,sh,xx,yy,ww,hh,pa='',t="','",u=",";
 if((g=MM_findObj(el))==null){return;}
 if((parseInt(navigator.appVersion)>4 || navigator.userAgent.indexOf("MSIE")>-1)&& !window.opera){pa="px";}
 var tS="fluidLayers('"+el+t+lp+t+tp+t+wp+t+hp+"',"+lm+u+rm+u+tm+u+bm+")";
 if(window.innerWidth) {sw= window.innerWidth;sh = window.innerHeight;
 }else if(document.body) {sw=document.body.clientWidth;sh=document.body.clientHeight;
    if(document.body.offsetWidth == sw && document.documentElement && document.documentElement.clientWidth) {
  sw=document.documentElement.clientWidth;}
    if(document.body.offsetHeight == sh && document.documentElement && document.documentElement.clientHeight) {
     sh=document.documentElement.clientHeight;}}
 if(!g.fluid) {g.fluid=true;g.fluidw=0;g.fluidh=0;}
 if(sw==g.fluidw && sh==g.fluidh) {setTimeout(tS,20);return;}
 d=(document.layers)?g:g.style;
 if(wp=='auto') {if(lp=='auto'){ww=sw-lm-rm;}else{ww=sw-lp-rm;}}else{ww=wp;}
 if(hp=='auto') {if(tp=='auto'){hh=sh-tm-bm;}else{hh=sh-tp-bm;}}else{hh=hp;}
 if(lp=='auto') {if(wp=='auto'){xx=lm;}else{xx=sw-wp-rm;}}else{xx=lp;}
 if(tp=='auto') {if(hp=='auto'){yy=tm;}else{yy=sh-tp-bm;}}else{yy=tp;}
 d.left=xx+pa;d.top=yy+pa;
 if(document.layers){g.clip.height=hh;g.clip.width=ww;
 }else if(window.opera){g.style.pixelHeight=hh;g.style.pixelWidth=ww;
 }else{d.width=ww+pa;d.height=hh+pa;}
 g.fluidw=sw;g.fluidh=sh;
 setTimeout(tS,20);
}
//-->
</script>
</head>
<body onLoad="fluidLayers('content','5','50','auto','auto',5,5,5,5)">
<div id="content" style="position: absolute; top:50px; left:5px; background-color: #D4D0C8; layer-background-color: #D4D0C8; border: 1px none #000000"> 
<p>This is the content box.</p>
  <p>No matter how you size the window, this grey box should be:</p>
  <p>50px from the top<br>
    5px from the left<br>
    5px from the right<br>
    5px from the bottom</p>
  <br>
<p>There should be no horizontal or vertical scrolling, unless the content goes beyond the box/screen. Of course, just change the values to whatever you need them to be.</p>
</div>
</body>
</html>

这段代码的作用是: 当你放大或者还原browser时, 你的显示内容(div)可以随着browser的放大或者变小而随之改变.

你可以拷贝这些代码,保存在后缀名为.html的文件中来看到效果

分享到：

通过poi取出excel中的数据 | java 程序中处理bmp图片

2008-03-07 17:17
浏览 981
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

随着browser的放大或者变小而随之改变的div

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

随着browser的放大或者变小而随之改变的div

评论

发表评论

相关推荐

最近访客更多访客>>