!DOCTYPE影响了 Height 属性，请各位帮看看代码

BaSaRa_GIT 2005-11-17 12:49:36

这段代码加了DOCTYPE，Table不能占满整个页面，如果不加DOCTYPE就可以让Table占满整个页面，请问怎样做才可以让Table在存在DOCTYPE(xhtml)的情况占据整个屏幕？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Test</title>
</head>
<body>

<table width="100%" height="100%" border="1" bgcolor="#CCCCCC">
<tr>
<td> </td>
</tr>
</table>
</body>
</html>

...全文

79 2 打赏收藏转发到动态举报

写回复

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

孟子E章 2005-11-17

打赏
举报

回复

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Test</title>
</head>
<body style="height:100%;margin:0">
<table width="100%" height="100%" border="1" bgcolor="#CCCCCC">
<tr>
<td> </td>
</tr>
</table>
</body>
</html>

BaSaRa_GIT 2005-11-17

打赏
举报

回复

谢谢

一开始的需求只是表头部分在滚动时能一直固定在头部，那关键要实现的就是让tr能定位。首先想到的方法是给tr设置relative，用ie6/7测试以下代码： Code 1 2 3 4 给tr设置relative后就能相对table定位了，看来很简单啊，但问题是这个方法ie8和ff都无效，而且存在很多问题，所以很快就被抛弃了。 ps：该效果用来做tr的拖动会很方便。接着想到的是给table插入一个新tr，克隆原来的tr，并设置这个tr为fixed（ie6为absolute），例如： Code 1 2 3 4 5 6 第一个问题是fixed的tr在ie7中不能进行定位，而且td在定位后并不能保持在表格中的布局，这样在原表格插tr就没意义了。 ps：fixed的相关应用可参考仿LightBox效果。最后我用的方法是新建一个table，并把源tr克隆到新table中，然后通过对新table定位来实现效果。用这个方法关键有两点，首先要做一个仿真度尽可能高的tr，还有是要准确的定位，这些请看后面的程序说明。程序说明【克隆table】克隆一个元素用cloneNode就可以了，它有一个bool参数，表示克隆是否包含子节点。程序第一步就是克隆原table： this._oTable = $(table);//源table this._nTable = this._oTable.cloneNode(false);//新table this._nTable.id = "";//避免id冲突要注意虽然ie的cloneNode参数是可选的（默认是false），但在ff是必须的，建议使用时都写上参数。还要注意的是id属性也会被克隆，也就是克隆后会有两个相同id的元素（如果克隆对象有设置的话），这很容易会导致其他问题，程序会把克隆table的id属性设空。 ps：table请用class来绑定样式，用id的话新table就获取不了样式了。克隆之后再设置样式： this._style.width = this._oTable.offsetWidth + "px"; this._style.position = isIE6 ? "absolute" : "fixed"; this._style.zIndex = 100; 一般来说offsetWidth是width+padding+border的结果，但table比较特别，测试下面的代码： Code DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra

一、初步了解HTML HTML是一种超文本标签语言，浏览器则是用来“解释和执行”HTML源码的工具。 HTML的基本结构 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> ...

在前端网看到bushiwuqingwu 写的关于HTML5的基本样式的文章，写的很详细，先mark下来学习一下，也给大家分享一下。还是一个小菜鸟，有什么不对的请各位大神不用留情的拍砖（轻点~~~~） <!DOCTYPE HTML> <!--<!DOCTYPE html>; DOCTYPE标签没有结束标签。DOCTYPE 对大小写不敏感。--&g...

文章目录格式1.过渡效果源代码最终效果2.过度练习最终效果写在最后格式 transition: 变化的属性花费时间运动曲线何时开始如果需要写多个属性，需要用逗号进行分割如果所有的属性都要变化，属性写all 谁要过度给谁加 1.过渡效果源代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA.

一、问题发现：不需要看案例的朋友可直接移步“四、解决方法3”查看display:box的用法做实验时发现，当确定父元素的宽高后，在父元素内以%确定子元素宽高时，子元素的宽高不会包括padding、border和margin，当加上这些属性后，可能会导致子元素被挤出原来的位置。实例如下： html代码： <!DOCTYPE html> <html lang="en"> ...

61,112

社区成员

60,730

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章