自适应浏览器高度的表格

最新推荐文章于 2021-06-28 20:09:19 发布

aixia7080

最新推荐文章于 2021-06-28 20:09:19 发布

阅读量139

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/bobomouse/archive/2007/06/10/778333.html

版权

    昨天发现原先静态页面中的表格样式中，height属性设置的是"100%"，可以根据浏览器的大小自动满屏显示，即表格的高度自适应浏览器高度（单元格里有个iframe）。但是代码在拷贝到Visual Studio 2005里后，表格的高度不能自适应，即iframe在这个时候显示不全，只有设置了height为具体的象素值时表格的高度才改变。如果设置为百分比，不起任何作用。

    后来发现原来是Visual Studio 2005默认加了下面的这句话，即W3C的标准在作怪。将下面这段话注释掉后，页面就能显示完整的iframe了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    但是如果非要加入W3C标准怎么办呢？于是在网上找了一段自适应高度的代码：

<html>

<head>

<title>...</title>

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

function x(){

var y=""

y+='scrollHeight:'+document.body.scrollHeight;

y+=' offsetHeight:'+document.body.offsetHeight;

y+=' clientHeight:'+document.body.clientHeight;

//document.body.appendChild(document.createTextNode(y))

window.alert(y);

if(document.body.scrollHeight<document.body.offsetHeight)

{

mytab.height+=(document.body.offsetHeight-document.body.scrollHeight)

}

}

</script>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"><style type="text/css">

<!--

body {

margin-top: 0px;

margin-bottom: 0px;

}

-->

</style></head>

<body οnlοad="x();">

<table width="514" height="300" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#666666" id="mytab">

<tr>

<td> </td>

</tr>

</table>

</body>

</html>

转载于:https://www.cnblogs.com/bobomouse/archive/2007/06/10/778333.html

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。