table的100%到底怎么了

最新推荐文章于 2023-02-16 10:57:58 发布

zhongxiucheng

最新推荐文章于 2023-02-16 10:57:58 发布

阅读量1.1k

点赞数

分类专栏： WEB前端文章标签： table xhtml html border iframe server

WEB前端专栏收录该内容

32 篇文章 0 订阅

订阅专栏

去掉页面头的

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

还可以设置css让body高度100%，可以让div的高度100%，这个方法不需要去掉

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

css：

body{height:100%}
html,body{height:100%}

如果去掉了

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

table高度还不能100%，在table内加一个<tr><td style=" height:100%"></td></tr>

======================================================================================

编程需要细心观察的人，我调试了接近一天的时间了，只为了一个table的高度自适应问题，真是百思不得其解。

我只是想让表格和浏览器同样高度，然后让单元格中的图片垂直居中，很简单的一件事情嘛。

让代码说明一切：

<!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=utf-8" />
<title>将table的高度设置为100%，为何不见效果？ By QFSoft</title>
<style type="text/css">

</style>
</head>
<body>
<table bordercolor="#000000" style="width:100%; height:100%;" border="0" cellspacing="0" cellpadding="0">
<tr><td><img src="logo.png" width="244" height="94" border="0" /></td></tr>
</table>
</body>
</html>

代码写的是什么毛病没有，但就是没有想要的效果，可能你已经注意到开头红颜色的一行代码，是的，若删了它，会怎样呢，我们试试看。

奇迹发生了，出现了我想要的效果

其实，这个不是我发现的，而是在我快失去调试的信心时，看到了下面这个帖子，感谢网络，感谢热心的网友。

地址：http://bbs.blueidea.com/thread-2857142-1-1.html

话说回来，这个问题不应该是通过删除第一行来解决问题，而是通过这个发现问题的所在。

正确的代码应是：

<!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=utf-8" />
<title>将table的高度设置为100%，为何不见效果？ By QFSoft</title>
<style type="text/css">

</style>
</head>
<body>
<table bordercolor="#000000" style="width:100%; height:100%;" border="0" cellspacing="0" cellpadding="0">
<tr><td><img src="logo.png" width="244" height="94" border="0" /></td></tr>
</table>
</body>
</html>
重点就在红色的代码上，至于原因参考上面帖子的地址。

当你遇到table表格的高度设置为100%，却没有收到实际的效果时，本文也许能够帮助你。

==========================================================================================

表格(table)设置高度为100%,最后一行有iframe框架的情况

　早之前在项目中用到了 iframe 框架，并且是在一个三行的table中最后一行中加入 ifram，前两行里是用来功能的操作，前两行设置了高度，最后一行不想设置高度，让它width：100% ；但是就是不起作用。前面一直没有解决掉这个问题，就给设置了一个高度。后面想来想去，这个问题迟早都要解决，不然iframe的滚动条就会出现问题，屏幕分辨率不一样的时候就看不到水平滚动条。

　　今天，无意中发现了一个很好的方法，解决了table在IE中的100%问题。

　　IE下要用expression解决
　　height:expression(document.body.clientHeight-58 + "px" );
　　其中这个-58高度要根据上下高度来决定的，自己可以试着调整，要比前两行高度和大。

1 DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <html xmlns="http://www.w3.org/1999/xhtml" >
6 <head runat="server">
7 <title>定义过程title>
8 head>
9 <style type="text/css">
10 html,body
11 {
12 margin:0; padding:0;
13 height:100%;width:100%;
14 border:none; font-size:12pt;
15 overflow:hidden;
16 }
17 .tab_main{width:100%; height:100%; text-align:left;border:0; margin:0; padding:0;}
18 .tab_top
19 {
20 background-color:#D7E5F7; height:25px;
21 border-top:solid 3px #B0CEED; border-bottom:solid 2px #B0CEED;
22 font-weight:bold; color:#3764A0;
23 text-align:center;
24 }
25 .tab_center{height:25px; border-bottom:solid 2px #C5D6FD}
26 .tab_bottom{height:100%;}
27 .autoHeight
28 {
29 height:expression(document.body.clientHeight-58 + "px" ); padding:0px; margin:0px;
30 }
31 style>
32 <body>
33 <form id="form1" runat="server">
34 <table class="tab_main" cellpadding="0" cellspacing="0">
35 <tr>
36 <td class="tab_top">
37 第一行
38 td>
39 tr>
40 <tr>
41 <td class="tab_center" valign="middle">
42 第二行
43 td>
44 tr>
45 <tr>
46 <td class="tab_bottom" id="tabframe" valign="top">
47 <div class="autoHeight">
48 <iframe id="content" name="content" src="admin.html"frameborder="0" style="height:100%; width:100%;">iframe>
49 div>
50 td>
51 tr>
52 table>
53 form>
54 body>
55 html>