青海龙8国际乐建设、网络推广最好的公司--您身边的龙8国际乐建设专家,马上拿起电话,联系我们:0971-8235355   
青海西宁龙8国际乐建设、龙8国际乐制作公司-西宁威势电子信息服务有限公司
 
西宁威势最新龙8国际乐制做案例展示
Lastest Project
 
当前位置为:首页 >> CSS知识 >> 正文  
龙8国际乐_龙8国际娱乐电脑版_龙8国际娱城手机版

文章来源: 西宁威势电子信息服务有限公司     发布时间:2010-8-3    浏览次数:5325    tags:DIV页面布局

特此申明:网上关于此类文章均极不负责任,相互引用,但实际测试大多仅在火狐下正常。本例在IE5.0   6.0   7.0   8.0 火狐下均做测试并达到“一致”的显示效果

代码开始

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

说明:引用与不引用的差别很大,IE下CSS受影响,火狐下JS受影响,使用过程中删除本行

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>龙8国际乐_龙8国际娱乐电脑版_龙8国际娱城手机版</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
html,body{
height:100%;
width:100%;
font:small/1.5 "宋体", serif;
text-align:center;
}
.Framework 
{
height:100%;
width:100%;
text-align:left;
background:#666;
display:table;
margin:0 auto;
position:relative;
}

.Framework > div {
display:table-row;
}

.Framework_Top{
background:#FFFFFF;
height:100px;
width:100%;
}

.Framework_Bottom{
background:#fcc;
height:50px;
width:100%;
}

.Framework_Body {
display:table-cell;
background:#333333;
vertical-align:top;
}

</style>


<script  language="JavaScript" type="text/javascript">
<!--

    // 自动处理框架DIV高度中部(仅限IE6.0\7.0)
function AutoHeight() {

if (getBrowser() == "msie7.0" || getBrowser() == "msie6.0" || getBrowser() == "msie5.0") {

var Height_Top = Framework_Top.offsetHeight;
var Height_Body = Framework_Body.offsetHeight;
var Height_Bottom = Framework_Bottom.offsetHeight;
var Height_Page = window.document.body.clientHeight;

var Height_Page_Using = document.documentElement.clientHeight; 
//若以上无效,则采用(主要是IE6.0,5.0需要)
if (Height_Page > Height_Page_Using) {
Height_Page = Height_Page_Using;
}   

var Height_Mid = Framework_Mid.offsetHeight;

if ((Height_Top + Height_Body + Height_Bottom) <= Height_Page) {
Framework_Body.style.height = (Height_Page - Height_Top - Height_Bottom) + "px";
} else {
Framework_Body.style.height =  Height_Mid + "px";
}

//Thistext.innerHTML = getBrowser() + "当前使用了JS控制" + Height_Page;  
//这种方法(innerHTML )在IE下可通用
            
} else {
//document.getElementById("Thistext").innerHTML = getBrowser() + "当前使用了CSS控制" + window.document.body.clientHeight;  
            //这种方法(innerHTML )通用
}
}

//获取浏览器版本
function getBrowser() {
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
var re = /(msie|firefox|chrome|opera|version).*?([\d.]+)/;
var m = ua.match(re);
Sys.browser = m[1].replace(/version/, "'safari");
Sys.ver = m[2];
return Sys.browser + Sys.ver;
}

window.onresize = function() {
AutoHeight();
}
window.onload = function() {
AutoHeight();
}



//-->
</script>

</head>

<body>
<div id="Framework" class="Framework">
<div id="Framework_Top"  class="Framework_Top">顶部</div>
<div id="Framework_Body"  class="Framework_Body">
<div id="Framework_Mid">
                        你可以把中部使用的所有数据放这里(DIV什么的都行)
<div id="Thistext" style="text-align:center; height:300px; background-color:green; vertical-align:top;">
输出测试..
</div>
        </div>
</div>
<div id="Framework_Bottom" class="Framework_Bottom">底部</div>
</div>
</body>
</html>


代码结束


说明:ID为 Framework Framework_Top Framework_Body Framework_Mid Framework_Bottom  的元素建议不做修改,除非一起将CSS,JS中对应的名称改变
评论列表
正在加载评论……
  
评论   
呢  称:
验证码:
若看不清请点击更换!
内  容:
 
 
  在线洽谈咨询:
点击这里,在线洽谈   点击这里,在线洽谈   点击这里,在线洽谈
乘车路线    汇款方式   加盟合作  人才招聘
 
公司地址:青海省西宁市西关大街73号(三二四部队招行所四楼)     青ICP备13000578号-1 公安机关备案号:63010402000123    
QQ:147399120    mail:lostlove000@163.com    电话: 13897410341    邮编:810000
© Copyright( 2008-2009) QhWins.Com All Rights Reserved    版权所有:西宁威势电子信息服务有限公司 未经书面制授权,请勿随意转载!